Dynamically change field in Reactjs

Question

I am developing a project, and when typing a value in a field I need the other field to be changed based on the values I set in a function, here is the code:

 constructor(props) {
    super(props);
    this.state = {
        rendimentoMes: '',
        risco: '',

    }


}

changeRendimentoMesHandler= (event) => {
    this.setState({rendimentoMes: event.target.value});
}

changeRiscoHandler= (event) => {
    this.setState({risco: event.target.value});
}

In the function below I check the value that will be inserted in field Monthly income, which should have an impact on the risk field:

defineRisco(){
    if (this.state.rendimentoMes != null){
        if (this.state.rendimentoMes > 6000){
            this.state.risco = "A";
        } else if (this.state.rendimentoMes > 1000 && this.state.rendimentoMes <= 8000){
            this.state.risco = "B";
        } else {
            this.state.risco = "C";
        }
    }
}

And here’s my yield, where it should be dynamically upgraded according to field value Monthly income. I’m trying to accomplish this way, someone helps me know where I’m going wrong?

render() {
        return (
            <div>

                                <div className="form-group">
                                    <label> Rendimento Mensal: </label>
                                    <input type ="Number" placeholder="Rendimento Mensal:" name="rendimentoMes" className="form-control"
                                    value={this.state.rendimentoMes} onChange={this.changeRendimentoMesHandler} blur={this.defineRisco} />
                                </div>

                                <div className="form-group">
                                    <label> Risco: </label>
                                    <input disabled type ="Number" placeholder="" name="risco" className="form-control"
                                           value={this.state.risco} onChange={this.defineRisco()} />
                                </div>
                            </form>
                        </div>

                    </div>
                </div>


            </div>
        )
    }

Answer 1

Your code has many problems and errors that I ended up identifying as for example onChange has a delegate different defineRisco() and caused a erro, the other situation is the kind of <input> that it is important to always know that when putting letters can never be other than text your type and when updating the status rendimentoMes in the method this.setState after the first Paramento has the next which means that when changing the state of the variable performs some function that ai yes could be used defineRisco and in the defineRisco I also made adjustments because the value is a text saved in the state and needs to be changed to an integer, as in example:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        rendimentoMes: '',
        risco: '',
    }
    this.changeRendimentoMesHandler =
      this.changeRendimentoMesHandler.bind(this);
    this.changeRiscoHandler =
      this.changeRiscoHandler.bind(this);
    this.defineRisco = 
      this.defineRisco.bind(this);
  }
  changeRendimentoMesHandler = (event) => {
    this.setState({rendimentoMes: event.target.value},
    () => { 
      this.defineRisco();       
    }
    );
  }

  changeRiscoHandler = (event) => {
    this.setState({risco: event.target.value});
  }
  defineRisco = () => {  
    if (this.state.rendimentoMes){
        const value = parseInt(this.state.rendimentoMes);
        if (!value) return;
        if (value > 6000){
            this.setState({risco:'A'});
        } 
        else if (value > 1000 && value <= 8000)
        {
            this.setState({risco:'B'});
        } else {
            this.setState({risco:'C'});
        }
    }
  }
  
  render() {
    return (
      <div>
        {JSON.stringify(this.state)}
          <div className="form-group">
              <label> Rendimento Mensal: </label>
              <input type ="Number" 
                  placeholder="Rendimento Mensal:" 
                  name="rendimentoMes" 
                  className="form-control"
                  value={this.state.rendimentoMes} 
                  onChange={this.changeRendimentoMesHandler} 
              />
          </div>
        <div className="form-group">
            <label> Risco: </label>
            <input disabled 
                type ="text" 
                placeholder="" 
                name="risco" 
                className="form-control"
                value={this.state.risco} 
                onChange={this.changeRiscoHandler} 
            />
        </div>  
    </div>
    )
  }
}

ReactDOM.render( <App/> , document.getElementById('root'));

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<div id="root">Carregando ...</div>