In Semantic-UI-React, is there a way to add an x icon to a text input or dropdown that will clear the text when clicked?

I did find a solution, which I will share, but this means I can no longer have my lock icon on the left hand side, because an input can only have one icon.

What I've done is to use an Icon element, and add an onClick handler to that, as follows:

<Input ...
  icon={<Icon name='delete' link onClick={this.handleDeleteClick}/>}/>

(Updated) To clear the field, there is no "semantic-ui-react" shortcut as far as I know.

However, you can do this manually using your component state.

Here would be an example of this:

class ExampleClearField extends Component {
  state = {}

  handleChange = (e, { name, value }) => this.setState({ [name]: value })

  handleClear = () => this.setState({ email: ''})

  render() {
    const { email } = this.state

    return (
     <Form.Input iconPosition='left' name="email />
        <Icon name='x' link onClick={this.handleClear} />
        <input/>
     </Form.Input>

    )
  }
 }

** Notice the link, which is needed for Icon to accept onClick.

Also, dont't forget about (you might need to change it's place depending on iconPostion)