Updating state variable on click to show different components

Question

I am new to React and try to load different components based on state variables. I want my handler to dynamically know which state variable I am updating. As of now, I am explicitly passing the state name as a string.

State Variables

state = {
        showLogin: false,
        showHome: false
    }

Handler Method

handleShow = (element) => this.setState({ element: true });

Buttons

{
  !this.props.isAuthenticated ? (
    <Button
      variant="outline-primary"
      onClick={() => this.handleShow("showLogin")}
    >
      Login
    </Button>
  ) : (
    <>
      <Button
        variant="outline-primary"
        onClick={() => this.handleShow("showHome")}
      >
        Home
      </Button>
      <Button variant="outline-primary" onClick={this.authorizeUserMethod}>
        LogOut
      </Button>
    </>
  );
}

Does this answer your question? [How do I create a dynamic key to be added to a JavaScript object variable](https://stackoverflow.com/questions/2462800/how-do-i-create-a-dynamic-key-to-be-added-to-a-javascript-object-variable) — ksav, Mar 23 '20 at 04:02
No @Ksav. My question is more related to 'element' here. I am passing state variable as string eg: "showLogin", "showHome" but it not working. How can I pass the name of the state variable dynamically? — Avi, Mar 24 '20 at 01:53
`element` is a variable. The linked question deals with how to use the variable as a dynamic object key. — ksav, Mar 24 '20 at 02:31

score 3 · Answer 1 · answered Mar 23 '20 at 04:02

3

try this

handleShow = element => this.setState({
    ...this.state, 
    [element]: true
});

answered Mar 23 '20 at 04:02

iamhuynq

5,357
1
13
36

My question is more related to 'element' here. I am passing state variable as string eg: "showLogin", "showHome" but it not working. How can I pass the name of the state variable dynamically? – Avi Mar 23 '20 at 09:41

score 1 · Answer 2 · answered Mar 23 '20 at 05:16

1

In your handler method, you must use spread operator, this allow you create a clone of your state and thus concatenate a new value.

Handler Method

handleShow = (element) => this.setState({ ...this.state, [element]: true });

answered Mar 23 '20 at 05:16

David Navarro Astudillo

1,329
11
20

Updating state variable on click to show different components

2 Answers2