title: (React and Redux) Error: Objects are not valid as a React child
body: <p>I am working with React and Redux and I am getting the error mentioned in the title. This is how it looks in the browser, when I try to access the frontend -</p>
  <p><a href="https://i.stack.imgur.com/lmjCv.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lmjCv.jpg" alt="enter image description here" /></a></p>
  <p>Here is the code -</p>
  <p>ProductActions.js -</p>
  <pre><code>import axios from 'axios'
  import {
      PRODUCT_LIST_REQUEST,
      PRODUCT_LIST_SUCCESS,
      PRODUCT_LIST_FAIL
   } from '../constants/productConstants'
  
   export const listProducts = () =&gt; async (dispatch) =&gt; {
      try{
         dispatch({ type: PRODUCT_LIST_REQUEST })
         
         const { data } = await axios.get('/api/products/')
  
         dispatch({
             type: PRODUCT_LIST_SUCCESS,
             payload:data
         })
       }catch(error){
         dispatch({
             type:PRODUCT_LIST_FAIL,
             payload:error.response &amp;&amp; error.response.data.message
                  ? error.response.data.message
                  : error.message,
         })
       }
    }
  </code></pre>
  <p>HomeScreen.js -</p>
  <pre><code>import React, { useState, useEffect }  from &quot;react&quot;;
  import { useDispatch, useSelector } from 'react-redux'
  import { Row, Col } from &quot;react-bootstrap&quot;;
  import Product from &quot;../components/Product&quot;;
  import { listProducts } from '../actions/productActions';
  
  function HomeScreen() {
      const dispatch = useDispatch()
      const productList = useSelector(state =&gt; state.productList)
      const {error, loading, products} = productList
  
    useEffect(() =&gt; {
       dispatch(listProducts())
  
    },[dispatch] )
  
    return (
      &lt;div&gt;
        &lt;h1&gt;Latest Products&lt;/h1&gt;
        {loading ? &lt;h2&gt;Loading...&lt;/h2&gt;
            :error ? &lt;h3&gt;{error}&lt;/h3&gt;
                :
                &lt;Row&gt;
                    {products.map((product) =&gt; (
                      &lt;Col key={product._id} sm={12} md={6} lg={4} xl={3}&gt;
                        &lt;Product product={product} /&gt;
                      &lt;/Col&gt;
          ))}
        &lt;/Row&gt;
      }
        
      &lt;/div&gt;
    );
  }
  
  export default HomeScreen;
  </code></pre>
  <p>ProductReducers.js -</p>
  <pre><code>import {
      PRODUCT_LIST_REQUEST,
      PRODUCT_LIST_SUCCESS,
      PRODUCT_LIST_FAIL
   } from '../constants/productConstants'
  
  export const productListReducer = (state = { products: [] }, action) =&gt; {
      switch (action.type) {
          case PRODUCT_LIST_REQUEST:
              return { loading: true, products: [] }
          
          case PRODUCT_LIST_SUCCESS:
              return { loading:false, error: action.payload }
              
          case PRODUCT_LIST_FAIL:
              return { loading: false, error: action.payload }
              
          default:
              return state    
       }
   }
  </code></pre>