title: React, Conditionally rendering a component based upon communication between a parent and two children components
body: <p>I am kinda new to React, what I am trying to do is this, I have a parent component that carries the state, and two children that are considered to be the so-called presentational components lets say <strong>(X,Y)</strong>. 
  So, Component <strong>X</strong> receives an array of Items as a prop from the parent and render it, Now, the event should be fired on one of the Items in the <strong>X</strong> component, then the <code>onClick</code> function will be fired, returning the <code>Item.id</code> to the parent, the parent then will filter the items in the state and pass the selected Item to component <strong>Y</strong>, Now I want <strong>Y</strong> to be rendered if and only if it successfully received the selected Item from the parent, here is my code. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// PARENT COMPONENT
  class Main extends Component {
  
    constructor(props) {
      super(props);
  
      this.state = {
        dishes: DISHES,
        selectedDish: null
      }
    }
  
    onDishSelect(dishId){
      this.setState({ selectedDish : dishId })
    }
  
    render() {
      return (
        &lt;div &gt;
         &lt;Navbar dark color="secondary" &gt;
          &lt;div className="container"&gt;
            &lt;NavbarBrand href="/"&gt;My Brand&lt;/NavbarBrand&gt;
          &lt;/div&gt;
         &lt;/Navbar&gt;
         &lt;Menu dishes={this.state.dishes}
              onClick={(dishId) =&gt; this.onDishSelect(dishId)} /&gt;
         &lt;DishDetails dish={this.state.dishes.filter(dish =&gt; dish.id === this.state.selectedDish)[0]} /&gt;
        &lt;/div&gt;
      );
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Component <strong>X</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>render() {
          const menu = this.props.dishes.map(item =&gt; {
              return (
                  &lt;div key={item.id} className="col-12 col-md-5 offset-md-1 mt-3"&gt;
                      &lt;Card onClick={() =&gt; this.props.onClick(item.id)}&gt;
                          &lt;CardImg width="100%" src={item.image} alt={item.name} /&gt;
                          &lt;CardImgOverlay  className="ml-5"&gt;
                              &lt;CardTitle &gt;{item.name}&lt;/CardTitle&gt;
                          &lt;/CardImgOverlay&gt;
                      &lt;/Card&gt;
                  &lt;/div&gt;
              )
          });
  
          return (
              &lt;div className="container"&gt;
                  &lt;div className="row"&gt;
                      { menu }
                  &lt;/div&gt;
                 
              &lt;/div&gt;
          );
      }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Finally component <strong>Y</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class DishDetails extends Component {
      constructor(props) {
          super(props)
      }
  
      renderCard(dish) {
         if(this.props.dish){
          return (
              &lt;div className="col-12 col-md-5 offset-md-1 mt-5 "&gt;
                  &lt;Card&gt;
                      &lt;CardImg width="100%" src={dish.image} alt={dish.name} /&gt;
                      &lt;CardBody&gt;
                          &lt;CardTitle&gt;{ dish.name }&lt;/CardTitle&gt;
                          &lt;CardText&gt;{ dish.description }&lt;/CardText&gt;
                      &lt;/CardBody&gt;
                  &lt;/Card&gt;
              &lt;/div&gt;
          )
         } else {
             return(&lt;div&gt;&lt;/div&gt;)
         }
      }
  
      renderViews(review){
         if(this.props.dish){
          return(
              &lt;div key={review.id} className="col-12 col-md-5 mt-5"&gt;
                  &lt;Media body className="mt-2"&gt;
                      &lt;p&gt;{review.comment}&lt;/p&gt;
                      &lt;p&gt;{ review.author }, {new Intl.DateTimeFormat('en-US',{year: 'numeric', month:'short', day: '2-digit'}).format(new Date(Date.parse(review.date)))}&lt;/p&gt;
                  &lt;/Media&gt;
              &lt;/div&gt;
          )
         } else {
             return(&lt;div&gt;&lt;/div&gt;)
         }
      }
  
  
  
      render(){
          return(
              &lt;div className="row"&gt;
                  { this.renderCard(this.props.dish) }
                  { this.renderViews(this.props.dish.comments) }
              &lt;/div&gt;
          )
          
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I know the code structure is very messed up, I am just more concerned abou the functionality for now, thanks in advance.  </p>