CODEWITHSUNDEEP
reactjssemantic-uisemantic-ui-react
pypmannetjies
pypmannetjies

Reputation: 31264

Dynamically set a property value for an Input in Semantic UI React

I have an Input element that I want to display an error on when the form validation fails. 

<Input ref="amount" error={false} />

When the user enters an incorrect amount, I want to change "error" to "true". How can this be done?

I have tried:

this.refs.amount.props.error = true;

Which seems bad but I'm not sure how else. If I add a conditional statement in the definition of the Input element, that seems to only evaluate once and then remain the same. Do I need to force an update on the element? If so, how?

Upvotes: 3

Views: 3725

Answers (3)

Daniel Khoroshko
Daniel Khoroshko

Reputation: 2721

This is not exactly the answer, but still:

This type of fiddling with each possible state of form element (valid, invalid, warning, show tooltip, was edited, in focus, left focus, was submitted, submit failed or not, etc) becomes to much trouble when the form grows beyond 1 input field.

I would suggest to use redux-form package that integrates with semantic-ui-react` almost perfectly and provided you have provided it with the validate function does everything else for you. It takes some time to understand the basics of it, but it really pays.

Upvotes: 1

The Reason
The Reason

Reputation: 7973

Yes it's possible to validate the input when the form is submitted. All you need is to keep track on input value and use same approach as @SajithDilshan for the input error.

this.state = {
  error: false,
  value: ''
}
...
render(){
  return
    ...
    <Input
      ref="amount" 
      value={this.state.value}
      error={this.state.error}
    />
    ...

}

Then onSubmit should looks like:

onSubmit(e){
  const isError = this.state.value === '';
  this.setState({error: isError});
  // rest of your logic
}

Hope it will help!

Upvotes: 2

Sajith Edirisinghe
Sajith Edirisinghe

Reputation: 1727

Use the onChange() method on the input as below.

<Input ref="amount" onChange={this.onInputChange} error={this.state.error} />

After that implement the onInputChange() method as below in your component.

onInputChange = (e) => {
    if (e.target.value === "") { // logic to validate the input
        this.setState({error: true});
    } else {
        this.setState({error: false});
    }
}

Note that this will add error property to the state.

Further, you should not modify the props within a component. Props are passes from parent component to the child component as immutable inputs.

Upvotes: 1

Related Questions