render a component on button click React ES6

Question

I want to open/render/show a component on button click. I'm trying to do this by changing state but unable to do so.

I want to render component on button click. The state gets changed but the component doesn't render.

    export default class NewNav extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
      date: new Date(),
      login: false
    };
    this.handleClick = this.handleClick.bind(this);

  }

  handleClick(e) {
    this.state.login = true;
    }

  render() {

    const style = {
      margin: 12
    };

    return (
      <MuiThemeProvider>

        <div className="top-bar">
          <div className="top-bar-left">
            <ul className="menu">
              <li>
                <RaisedButton
                  label="Sign Up"
                  style={style}
                  primary={false}
                  onClick={this.handleClick}
                  labelColor="#FFF"
                  backgroundColor="#00E676"/>
              </li>

            </ul>
          </div>
          <div className="top-bar-right">

            <ul className="menu">

              <li>
                <RaisedButton
                  label="Log In"
                  primary={true}
                  className="btnLogin"
                  backgroundColor="#3AAA35"></RaisedButton>

              </li>

              <li>
                <RaisedButton
                  label="Sign Up"
                  primary={false}
                  labelColor="#FFF"
                  backgroundColor="#00E676"/>

              </li>

            </ul>
            {this.state.login
              ? <FirstPage/>
              : null
}

          </div>

        </div>
      </MuiThemeProvider>

    );
  }
}

Bartek Fryzowicz · Accepted Answer · 2017-02-22 09:20:29Z

1

Don't set state directly, use setState method. Otherwise react is not aware of state change and will not re-render component.

So instead of this:

  handleClick(e) {
    this.state.login = true;
  }

use this:

  handleClick(e) {
    this.setState({login: true});
  }

answered Feb 22, 2017 at 9:20

Bartek Fryzowicz

6,70420 silver badges29 bronze badges

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

Comments

rakwaht · Accepted Answer · 2017-02-22 09:27:38Z

0

Your implementation is changing the state without letting React knowing it: according to the documentation you an see that

setState()

Performs a shallow merge of nextState into current state. This is the primary method you use to trigger UI updates from event handlers and server request callbacks.

The first argument can be an object (containing zero or more keys to update) or a function (of state and props) that returns an object containing keys to update.

Here is the simple object usage:

this.setState({mykey: 'my new value'});

So in your case you are supposed to update your state using something like this:

 handleClick(e) {
    this.setState({login: true});   
 }

answered Feb 22, 2017 at 9:27

rakwaht

4,0174 gold badges34 silver badges47 bronze badges

1 Comment

Alamgir Qazi Over a year ago

Thanks. Yeah I realized the mistake. I was updating the state the wrong way

Collectives™ on Stack Overflow

render a component on button click React ES6

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related