title: React: TypeError: Cannot read property 'dishes' of null
body: <p>I'm pretty new to React and trying to make a project. However, when I compile, I get an error. I'm trying to pass the Component on DishdetailComponent to MenuComponent, and the MenuComponent to App.js. It works when I pass DishDetail to App.js, but it gives an error when I try to pass DishDetail to Menu to App.js. The error message occurs on MenuComponent.js, line: 12. Here's my code:</p>
  <p>DishdetailComponent.js:</p>
  <pre><code>import React, { Component } from 'react';
  import { Media } from 'reactstrap';
  import { Card, CardImg, CardImgOverlay, CardText, CardBody,
      CardTitle } from 'reactstrap';
  
  class DishDetail extends Component {
  
      constructor(props) {
          super(props);
    
          this.state = {
              selectedDish: null
          }
      }
    
      onDishSelect(dish) {
          this.setState({ selectedDish: dish});
      }
    
      renderDish(dish) {
          if (dish != null)
              return(
                  &lt;Card&gt;
                      &lt;CardImg top 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;
              );
          else
              return(
                  &lt;div&gt;&lt;/div&gt;
              );
      }
    
      render() {
          const menu = this.props.dishes.map((dish) =&gt; {
              return (
                &lt;div  className=&quot;col-12 col-md-5 m-1&quot;&gt;
                  &lt;Card key={dish.id}
                    onClick={() =&gt; this.onDishSelect(dish)}&gt;
                    &lt;CardImg width=&quot;100%&quot; src={dish.image} alt={dish.name} /&gt;
                    &lt;CardImgOverlay&gt;
                        &lt;CardTitle&gt;{dish.name}&lt;/CardTitle&gt;
                    &lt;/CardImgOverlay&gt;
                  &lt;/Card&gt;
                &lt;/div&gt;
              );
          });
    
          return (
              &lt;div className=&quot;container&quot;&gt;
                  &lt;div className=&quot;row&quot;&gt;
                      {menu}
                  &lt;/div&gt;
                  &lt;div className=&quot;row&quot;&gt;
                    &lt;div  className=&quot;col-12 col-md-5 m-1&quot;&gt;
                      {this.renderDish(this.state.selectedDish)}
                    &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
    }
  
  export default DishDetail;
  </code></pre>
  <p>MenuComponent.js:</p>
  <pre><code>import React, { Component } from 'react';
  import { Media } from 'reactstrap';
  import { Card, CardImg, CardImgOverlay, CardText, CardBody, CardTitle } from 'reactstrap';
  import DishDetail from './DishdetailComponent';
  
  class Menu extends Component {
  
    constructor(props) {
      super(props);
    }
    render() {
      return &lt;DishDetail dishes = {this.state.dishes} /&gt;;
    }
  }
  
  export default Menu;
  </code></pre>