Showing 1 of 2 components on button click

On the parent component, I am trying to do 2 buttons, each of them will show a component, the first button shows itemlist and second component shows itemlist2 but I couldn't seem to get it right, I tried to follow this example (https://codepen.io/PiotrBerebecki/pen/yaVaLK) even though I'm not sure its the right resource for such feature, here is my app.js code

  class App extends Component {
  state = {
    one: false
  };

  handleClick(e) {
    const userChoice = e.target.className;
    this.setState({
      userChoice
    });
  }

  toggleDiv() {
    this.setState({
      one: !this.state.one
    });
  }

  toggleDiv1() {
    this.setState({
      one: this.state.one
    });
  }

  render() {
    return (
      <div>
        <NavBar />
        <div className="container-fluid">
          <ServiceSelector toggleDiv={this.toggleDiv.bind(this)} />
          {this.state.one == false ? <ItemList /> : <ItemList2 />}
        </div>
      </div>
    );
  }
}

class ServiceSelector extends React.Component {
  toggleDiv() {
    this.props.toggleDiv();
  }
  toggleDiv2() {
    this.props.toggleDiv2();
  }

  render() {
    return (
      <div>
        {" "}
        <button onClick={this.toggleDiv.bind(this)}>sss </button>
        <button onClick={this.toggleDiv1.bind(this)}>sss </button>
      </div>
    );
  }
}