Give React setState parameters variable value

Question

I want to create a function handleFalse() in react so it works something like:

state = {
  Java: false,
  Python: false
}

handleFalse(language) {
  this.setState({language}:true);
}

render() {
  return(
    <Modal onHide={this.handleFalse("show")}></Modal>
  )
}

where language would be one of Java or Python.

Brian Thompson · Accepted Answer · 2020-02-24 20:37:12Z

3

You can use a computed property like this:

handleTrue(language) {
  this.setState({ [language]: true });
}

You can reference an object property with a variable by using [].

This works when accessing too: this.state[language]

answered Feb 24, 2020 at 20:37

Brian Thompson

14.5k4 gold badges27 silver badges50 bronze badges

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

4 Comments

Ken Over a year ago

Thanks, but now I get an error saying "Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops." Do you know why?

Brian Thompson Over a year ago

That's going to be unrelated to this code here, and most likely caused by where you are calling the function. Can you show how you are calling it?

Brian Thompson Over a year ago

Change to onHide={() => this.handleFalse("show")}. The way it is currently you are calling the handleFalse function every render, which sets state, which causes a re-render, and then repeats infinitely.

Brian Thompson Over a year ago

onHide={() => doSomething()} is assigning onHide a function. onHide={doSomething()} is assigning onHide the value of whatever doSomething returns.

Collectives™ on Stack Overflow

Give React setState parameters variable value

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related