title: Need to render a sidebar component onclick() from another component
body: <p>I am new to react, I have a side bar component, which i am trying to render from inside another component on a button click, i have had some success but , the solution is not perfect, the side bar is opening on click but it is only doing it once, it is working again after i refresh the page</p>
  
  <pre><code>    //this is sidebar.js  
      class SideBar extends React.Component {
          constructor(props) {
              super(props);
              this.state = {
                  sidebarOpen: true,
                  sidebar: null
              };
              this.onSetSidebarOpen = this.onSetSidebarOpen.bind(this);
          }
  
          onSetSidebarOpen(open) {
              this.setState({ sidebarOpen: open });
          }
  
          render() {
              return (
                  &lt;Sidebar
                      sidebar={&lt;b&gt;Sidebar content&lt;/b&gt;}
                      open={this.state.sidebarOpen}
                      onSetOpen={this.onSetSidebarOpen}
                      styles={{ sidebar: { background: "white" } }}
                  &gt;
                  &lt;/Sidebar&gt;
              );
          }
      }
  </code></pre>
  
  <p>// this is how i am accessing it     </p>
  
  <pre><code>  class EventCard extends React.Component{
         constructor(props) {
         super(props);
         //this.state = { isAboutVisible:null};
      }
  
      state = {
          isAboutVisible: false,
        }
  
      render(){
          const {title, type, description, icon } = this.props.event;
          return (
              &lt;div ref={this.eventRef}&gt;
                  &lt;span&gt;{title}&lt;/span&gt;
                  &lt;p&gt;{type}&lt;/p&gt;
                  &lt;img 
                  alt={description}
                  src={icon}
                  /&gt;
                   &lt;button onClick={() =&gt; this.setState({isAboutVisible: true})}&gt;More Info&lt;/button&gt;
                   { this.state.isAboutVisible ? &lt;SideBar /&gt; : &lt;div&gt;&lt;/div&gt; }
                  &lt;button&gt;Delete&lt;/button&gt;           
              &lt;/div&gt;
          );
      }
  }
  
  export default EventCard;
  </code></pre>
  
  <p>// getting this error after i click on the button:</p>
  
  <pre><code>index.js:1375 Warning: Failed prop type: The prop `children` is marked as required in `Sidebar`, but its value is `undefined`.
      in Sidebar (at SideBar.js:19)
      in SideBar (at EventCard.js:21)
      in div (at EventCard.js:13)
      in EventCard (at EventList.js:7)
      in div (at EventList.js:11)
      in EventList (at App.js:19)
      in div (at App.js:17)
      in App (at src/index.js:7)
  </code></pre>