How to change option in select when filling text input in reactjs?

Question

JavaScript

There is a code:

<legend>Data:</legend>
          <Input type="text" name="Payment" id="Payment" className="validate[required, custom[integer], max[9999999999999]]" placeholder="2000" addonBefore="Payment" addonAfter="cents" />
          <Input type="text" name="Value" id="Value" className="validate[required, custom[integer], max[9999999999999]]" placeholder="3500" addonBefore="Value" addonAfter="cents" />
          <Input type="select" label="Some code" placeholder="placeholder" >
            <option value="0">option1</option>
            <option value="1">option2</option>
            <option value="2">option3</option>
          </Input>
          <Input type="select" label="Some category" placeholder="Category">
            <option value="0">category1</option>
            <option value="1">category2</option>
            <option value="2">category3</option>
            <option value="3">Category4</option>
            <option value="4">Category5</option>
          </Input>
          <Input type="select" label="Another code" placeholder="some code">
            <option value="1">code1</option>
            <option value="2">code2</option>
            <option value="3">code3</option>
            <option value="4">code4</option>
            <option value="5">code5</option>
            <option value="8">code6</option>
            <option value="7">code7</option>
          </Input>

How do I change in the option select when filling one of the text fields, say, with option2 or option3? Where can I read about the implementation of such functionality in React?

Answer 1

https://facebook.github.io/react/docs/forms.html#c...

class Test extends React.Component {
  state = {
    text: '',
    select: 0
  };
  handleChange = ({target: {id, value}}) => {
    const data = {[id]: value};
    if (id == 'text') data.select = value.length % 3;
    this.setState(data);
  };
  render() {
    return <div>
      <input type='text' id='text' value={this.state.text} onChange={this.handleChange} />
      <select id='select' value={this.state.select} onChange={this.handleChange}>
        <option value='0'>option1</option>
        <option value='1'>option2</option>
        <option value='2'>option3</option>
      </select>
    </div>;
  }
}