title: React js giving error Objects are not valid as a React child, I used hooks
body: <p>I am sending data from Node JS to React JS in array object. In React JS when I am setting response data I am getting error &quot;Objects are not valid as a React child (found: object with keys {eventName, eventDate, merchantid}). If you meant to render a collection of children, use an array instead.&quot;</p>
  <p>I checked one of the Stackoverflow post <a href="https://stackoverflow.com/questions/57750301/usestate-array-of-objects">useState Array of Objects</a>. I am also setting value same way, but I am getting error.</p>
  <p>Below data I am sending from Node JS.</p>
  <pre><code>[
    {
      eventName: 'Sankranti',
      eventDate: 2021-01-21T00:00:00.000Z,
      merchantid: 'tp012345'
    },
    {
      eventName: 'Sankranti 1',
      eventDate: 2021-01-26T00:00:00.000Z,
      merchantid: 'tp012345'
    }
  ]
  </code></pre>
  <p>Below screen shot I can see error and response data on the console.
  <a href="https://i.stack.imgur.com/VwkUm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VwkUm.png" alt="enter image description here" /></a></p>
  <p>Below my code, I am getting error at setEventList(eventList =&gt; [...eventList, response]). Based on comments I added below code.</p>
  <pre><code>import React, { useState, useEffect } from 'react';
  import { connect } from 'react-redux';
  import Carousel from 'react-bootstrap/Carousel'
  import axios from 'axios';
  import DashboardNavBar from './DashboardNavBar';
  import Header from './Header';
  
  const DashboardPage = (props) =&gt; {
      const [eventList, setEventList] = useState([])
      const [index, setIndex] = useState()
  
      if (!props.profileData) {
          useEffect(() =&gt; {
              (async () =&gt; {
                  const eventsList = await axios.get(
                      &quot;http://localhost:3000/api/dashboard&quot;
                  );
                      console.log(eventsList.data)
                      const response = eventsList.data
                      setEventList(eventList =&gt; [...eventList, response])
                      if(!response){
                          setErrorMsg('Please create Event and then add User !!')
                      }
              })();
          }, []);
      }
  
      const eventListRender = eventList.length &gt; 0 ?
                          eventList.map((item,index) =&gt; {
                              console.log('item name: ', item[index].eventName)
                          return &lt;Carousel.Item&gt;{item[index].eventName}&lt;/Carousel.Item&gt;
                          }) :
                          &lt;Carousel.Item&gt;No upcoming events&lt;/Carousel.Item&gt;
  
      const handleSelect = (selectedIndex) =&gt; {
          console.log(eventList)
          console.log(selectedIndex)
          setIndex(selectedIndex)
      }
  
      return (
          &lt;div&gt;
              &lt;DashboardNavBar /&gt;
              &lt;Header /&gt;
              &lt;p &gt;Welcome !!!!!!&lt;/p&gt;
              &lt;Carousel
                  activeIndex={index}
                  onSelect={handleSelect}
                  &gt;
                  {eventListRender}
              &lt;/Carousel&gt;
          &lt;/div&gt;
      );
  }
  
  const mapStateToProps = (state) =&gt; ({
      profileData: state.auth.profileData
  })
  
  export default connect(mapStateToProps) (DashboardPage);
  </code></pre>
  <p>After adding below code it always reading first occurrence</p>
  <pre><code>const eventListRender = eventList.length &gt; 0 ?
                          eventList.map((item,index) =&gt; {
                              console.log('item name: ', item[index].eventName)
                          return &lt;Carousel.Item&gt;{item[index].eventName}&lt;/Carousel.Item&gt;
                          }) :
                          &lt;Carousel.Item&gt;No upcoming events&lt;/Carousel.Item&gt;
  </code></pre>
  <p>Please find the updated results</p>
  <p><a href="https://i.stack.imgur.com/JQkz1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JQkz1.png" alt="enter image description here" /></a></p>