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

Question

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?

The Reason · Accepted Answer · 2018-01-01 14:26:29Z

2

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!

answered Jan 1, 2018 at 14:26

The Reason

8,0135 gold badges27 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sajith Edirisinghe · Accepted Answer · 2018-01-01 13:49:34Z

1

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.

answered Jan 1, 2018 at 13:49

Sajith Edirisinghe

1,7371 gold badge12 silver badges18 bronze badges

3 Comments

pypmannetjies Over a year ago

Thanks. I can see your example working well. However I'm trying to validate the input when the form is submitted. The concept should be the same, however it doesn't seem to update the element when I set state on the Input. Is there some requirement that this must be done inside an onChange function?

Sajith Edirisinghe Over a year ago

Is it possible to post the code of your component to get a better idea of your problem? Further, are you performing backend validation?

pypmannetjies Over a year ago

I see now my problem was that I was trying to call "setState" on the Input element itself, not in my parent Component. Thanks, I understand this better now.

Daniel Khoroshko · Accepted Answer · 2018-01-01 14:35:41Z

1

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.

edited Jan 1, 2018 at 14:35

answered Jan 1, 2018 at 14:13

Daniel Khoroshko

2,7411 gold badge20 silver badges28 bronze badges

1 Comment

pypmannetjies Over a year ago

Thanks. This is a very simple app just to familiarise myself with React, but I will keep it in mind.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related