title: React: props are undefined, even though they should be
body: <p>my props in the children class is supposed to be an array of Event objects.</p>
  <p>I am checking beforehand, if the array is empty in App.js like this:</p>
  <pre><code>
  function App() {
  
    class Event {
      constructor(id, title, date){
        this.id = id;
        this.title = title;
        this.date = date;
      }
    }
  
    const [events, setEvents] = useState([])
    const [ids, setIds] = useState([])
    const [safedIds, setSafedIds] = ([])
    const [eventsPrep, setEventsPrep] = useState([Event])
  
    useEffect(() =&gt; {
        fetch('https://someAPI.com')
        .then(response =&gt; response.json())
        .then(
          res =&gt; {setEvents(res); 
          console.log(res);
        })
        .catch(err =&gt; console.log(err))
        .then(handleIncomingData())
        //.then(console.log(&quot;was here&quot;))
    }, [])
  
    function handleIncomingData () {
      if(events.length &gt; 0) {
        events.forEach(event =&gt; {
          ids.push(event[&quot;_id&quot;]);
          let date = new Date(event[&quot;date&quot;]);
          eventsPrep.push(new Event(event[&quot;_id&quot;], event[&quot;title&quot;], date.toDateString()))
        })
      } 
    }
  
    return (
      &lt;&gt;  
        &lt;Navbar/&gt;
        {eventsPrep.length &gt; 0 ? &lt;Home events={eventsPrep}/&gt; : &lt;&gt;&lt;/&gt;}
      &lt;/&gt;
      
    );
  }
  
  export default App;
  
  </code></pre>
  <p>but whenever I try to reach the props in the child component it is considered undefined.</p>
  <p>My child component:</p>
  <pre><code>import React from 'react'
  import SingleEvent from '../../event/SingleEvent'
  
  
  export const Home = (props) =&gt; {
      console.log(props.events)
      return (
          &lt;&gt;
            {props?.events
              ? props.events.forEach((event) =&gt; {
                  console.log('was here 2');
                  return &lt;SingleEvent title={event.title} start={event.date} /&gt;;
                })
              : 'no upcomming events'}
          &lt;/&gt;
      );
    
  }
  </code></pre>
  <p>Even if I only pass a string down, it is still undefined.</p>
  <p>Thanks for help!</p>