Change input color when data is not valid?

Question

That code works:

this.state = {
      backgroundcolorQuatro: '',
      backgroundcolorSeis:'',
      backgroundcolorDez:'',
      quatro:'',
      seis:'',
      dez:''
    }

 validar = () => {
    if (this.state.quatro !== '4') {
      this.setState({backgroundcolorQuatro: 'red'})
      alert("Correto seria 4");
      return;
    }
    if (this.state.seis !== '6') {
      this.setState({backgroundcolorSeis: 'red'})
      alert("Correto seria 6");
      return;
    }
    if (this.state.dez !== '10') {
      this.setState({backgroundcolorDez: 'red'})
      alert("Correto seria 10");
      return;
    }
    alert("Success !!!");
  }



 clean = () =>{
    this.setState({backgroundcolorQuatro:'',backgroundcolorSeis:'',backgroundcolorDez:''})
  }


render() {
    var inputQuatro = {
      backgroundColor: this.state.backgroundcolorQuatro
    }
    var inputSeis = {
      backgroundColor: this.state.backgroundcolorSeis
    }
    var inputDez = {
      backgroundColor: this.state.backgroundcolorDez
    }
    return (
      <div className="App">
        <div className="col-lg-8 ml-5">
          <div className="row mt-5">
            <label>2 + 2 =</label>
            <input onClick={this.clean} style={inputQuatro} onChange={(e) => { this.setState({ quatro: e.target.value }) }}></input>
          </div>
          <div className="row mt-5">
            <label>3 + 3 =</label>
            <input onClick={this.clean}  style={inputSeis} onChange={(e) => { this.setState({ seis: e.target.value }) }}></input>
          </div>
          <div className="row mt-5">
            <label>5 + 5 =</label>
            <input onClick={this.clean} style={inputDez} onChange={(e) => { this.setState({ dez: e.target.value }) }}></input>
          </div>
        </div>
        <button onClick={this.validar}>Validar</button>
      </div>
    );
  }
}
export default App;

For a screen with few fields would work, but if I had a screen with 50 fields I believe it would be impossible to do this way, because each INPUT would have an inputStyle and a variable in State.

So a screen with 50 fields would be with 50 variables in the state and 50 Style, and this seems to me clearly wrong.

Answer 1

You can solve this problem in a very simplified way.

It is important that you declare the function in the constructor in order to change the function context.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      bgColorQuatro: '',
    };
    this.validateQuatro = this.validateQuatro.bind(this);
  }

  validateQuatro(e) {
    if (e.target.value !== '4') {
      this.setState({
        bgColorQuatro: 'red'
      });
    } else {
        this.setState({
        bgColorQuatro: ''
      });
    }
  }

  render() {
    const {
      inputQuatroValue,
      bgColorQuatro,
    } = this.state;

    const styleInput = {
      backgroundColor: bgColorQuatro,
    }

    return (
      <React.Fragment>
        <label>2 + 2 =
          <input
            style={styleInput}
            onChange={this.validateQuatro}
          />
        </label>
      </React.Fragment>
    )
  }
}