title: I got this error => TypeError: Cannot read property 'image' of undefined
body: <p>I am very new in this area and I searched in many places and could not find the solution. I get the error "<strong>TypeError: Cannot read property 'image' of undefined</strong>". I don't know where is the problem.The image of the error is here.</p>
  
  <p><a href="https://i.stack.imgur.com/5D7ss.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5D7ss.png" alt="enter image description here"></a></p>
  
  <p>The class with the error is here.</p>
  
  <pre><code>import React, {useEffect} from 'react';
  import { Link } from 'react-router-dom';
  import { useSelector, useDispatch } from 'react-redux';
  import { detailsProduct } from '../actions/productActions';
  function ProductScreen(props){
  
  const productDetails = useSelector(state =&gt; state.productDetails);
  const {product,loading,error} = productDetails;
  const dispatch = useDispatch();
  
  useEffect(() =&gt; {
      dispatch(detailsProduct(props.match.params.id));
      return () =&gt; {
          //
      }
  }, [])
  
  return &lt;div&gt;
      &lt;div className="back-to-result"&gt;
          &lt;Link to="/"&gt;Back to result&lt;/Link&gt;
      &lt;/div&gt;
      {loading?&lt;div&gt;Loading...&lt;/div&gt;:
      error? &lt;div&gt;{error}&lt;/div&gt;:
      (
      &lt;div className="details"&gt;
          &lt;div className="details-image"&gt;
              &lt;img src={product.image} alt="product"&gt;&lt;/img&gt;
          &lt;/div&gt;
          &lt;div className="details-info"&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                      &lt;h4&gt;{product.name}&lt;/h4&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      {product.rating} Stars ({product.numReviews} Reviews)
                  &lt;/li&gt;
                  &lt;li&gt;
                      Price: &lt;b&gt;${product.price}&lt;/b&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      Description:
                      &lt;div&gt;
                          {product.description}
                      &lt;/div&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div className="details-action"&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                      Price: {product.price}
                  &lt;/li&gt;
                  &lt;li&gt;
                      Status: {product.status}
                  &lt;/li&gt;
                  &lt;li&gt;
                      Qty: &lt;select&gt;
                          &lt;option&gt;1&lt;/option&gt;
                          &lt;option&gt;2&lt;/option&gt;
                          &lt;option&gt;3&lt;/option&gt;
                          &lt;option&gt;4&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;button className="button"&gt;Add to Cart&lt;/button&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      )
      }
  
  &lt;/div&gt;
  }
  export default ProductScreen;
  </code></pre>
  
  <p>console.log(productDetails) is here</p>
  
  <p><a href="https://i.stack.imgur.com/7yq2Y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7yq2Y.png" alt="enter image description here"></a></p>