Почему не правильно задается style={{styles}}?

Question

[mishapsv]

Нужно для компонента установить display:"none" по умолчанию и менять на display:"block" при нажатии на кнопку.

class MainPage extends React.Component {
  constructor(props) {
          super(props);
          this.handleClick = this.handleClick.bind(this);
          this.state = {
            styles: 'display:"none"'
          }
        }
        handleClick() {
          this.setState({
            styles: 'display:"block"'
          });
        }

    render() {
        var styles = this.state.styles
        return (
            <div className="orders-page">
                <div className="inner">
                    <div className="grid hidden-palm margin-bottom-30">
                        <CreateOrderButton onClick={this.handleClick} />
                        <PopupNewOrder style={{styles}} />
                    </div>
                </div>
            </div>
        );
    }
};

Но получается это:

Answer 1

[Андрей Антропов]

class MainPage extends React.Component {
  constructor(props) {
          super(props);
          this.handleClick = this.handleClick.bind(this);
          this.state = {
            shown: false
          }
        }
        handleClick() {
          this.setState({
            shown: true
          });
        }

    render() {
        var styles = this.state.shown ? {
          display: 'block'
        } : {
          display: 'none'
        }
        return (
            <div className="orders-page">
                <div className="inner">
                    <div className="grid hidden-palm margin-bottom-30">
                        <CreateOrderButton onClick={this.handleClick} />
                        <PopupNewOrder style={styles} />
                    </div>
                </div>
            </div>
        );
    }
};