state隐藏show component，state中没有值

Question

我试图隐藏和显示组件，具体取决于我在选择列表中选择的值。

我的root app.js我有：

   logChange(val) {
      console.log("Selected: " + val);
      this.setState({ active: val });
    }


  render() {

    let options = [
      { value: 'Apprentice', label: 'Apprentice' },
      { value: 'Assessor', label: 'Assessor' },
      { value: 'Assessment Centre', label: 'Assessment Centre' }
    ];

    return (
      <div className="container">

          <User showDiv={this.logChange} />

           {
          this.state.active = "Apprentice"
            ? <Apprentice />
            : null
           }

              {
          this.state.active = "Assessor"
            ? <Assessor />
            : null
           }

          {
          this.state.active = "Assessment Centre"
            ? <AssessmentCenter />
            : null
           }



      </div>

User.js组件：

logChange(userType) {
  this.props.showDiv(userType.value);
}

如何检查状态并呈现相应的组件？

我没有在州内看到一个值：

Answer 1

尝试一下：

{ this.state.active === "Apprentice" && <Apprentice /> }

{ this.state.active === "Assessor" && <Assessor /> }

{ this.state.active === "Assessment Centre" && <AssessmentCenter /> }