How to change state by passing parameter to setState()

Question

I have dozen of input components. When some of them don't pass validation it gets coresponding propperty "invalidInputName = true" and class "hasError".

When user start typing in those input again, i need to remove "hasError" by changing "invalidInputName" to false. I want to write function clearValidation() witch will be accepting name of parameter and change it to false.

class ExchangeForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            paymentAmountValidation: false,
            invalidAccountNum: false,
            invalidPhone: false,
            invalidCheck: false
        }
    }

    // this function toogles input to normal state.
    // I want to pass the name of property which i want to reset 
    // For example: clearValidation('invalidPhone') must work as
    // this.setState({ ...this.state, invalidPhone: false }).
    // But best i've done was { property: propery:false } :(
    // I have to change this.state only with setState()
    clearValidation(property){
        this.setState({ ...this.state, property })
    }

    validation(){
        //it toogles state properties to true if found any error
    }
}

Is it possible?

score 14 · Accepted Answer · answered Mar 02 '18 at 19:10

14

clearValidation(property) {
    this.setState({
        [property]: false
    }
}

See the bracket notation section of the property accessors docs for more information.

answered Mar 02 '18 at 19:10

Anthony

6,422
2
17
34

4

The only good thing of being a dumb junior it's everyday amazing insights about simple things :) Thank you a lot, you have save a lot of time for me! – Dmitry Klymenko Mar 02 '18 at 19:25

How to change state by passing parameter to setState()

1 Answers1