title: How to pass state from parent to child as props then from that child to it s child as props in React.js
body: <p>For now everything is static data .</p>
  <p><strong>I have a parent sate: an array containing 4 objects
  like so :</strong></p>
  <pre><code> function App(){
  
    const [searchResults,setSearchResults] = 
      useState([
        {
        name: 'name1',
        artist: 'artist1',
        album: 'album1',
        id: 1
      },
      {
        name: 'name2',
        artist: 'artist2',
        album: 'album2',
        id: 2
      },
      {
        name: 'name3',
        artist: 'artist3',
        album: 'album3',
        id: 3
      },
      {
        name: 'name4',
        artist: 'artist4',
        album: 'album4',
        id: 4
      }
    ]);
  </code></pre>
  <p><strong>i pass this state to the child  in the return with this it works as expected :</strong></p>
  <pre><code>return (
   &lt;SearchResults searchResults = {searchResults} /&gt;
  )
  </code></pre>
  <p><strong>and from  i pass it to :</strong></p>
  <pre><code>import React,{useEffect,useState} from &quot;react&quot;;
  import './SearchResults.css';
  import TrackList from '../TrackList/TrackList';
  
  
  export default function SearchResults({searchResults}) {
      return (
          &lt;div className=&quot;SearchResults&quot;&gt;
              &lt;h2&gt;Results&lt;/h2&gt;
               &lt;TrackList tracks = {searchResults} /&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p>now is where things got me confused.</p>
  <p><strong>i try to map the data from the array to the child of this component like this(this is the whole component) :</strong></p>
  <pre><code>import React,{useEffect,useState} from &quot;react&quot;;
  import './TrackList.css';
  import Track from '../Track/Track'
  
  export default function TrackList(props) {
      return(
          &lt;div className=&quot;TrackList&quot;&gt;
              {
                  props.tracks.map( track =&gt; {
                      &lt;Track track = {track} key = {track.id} /&gt;
                  })
              }
              
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p><strong>and i get this error with the local server displaying a white screen</strong>
  [1]: <a href="https://i.stack.imgur.com/5niRQ.png" rel="nofollow noreferrer">https://i.stack.imgur.com/5niRQ.png</a></p>
  <ul>
  <li>i tried destructuring and assigning props value to a variable before mapping but didn't work .</li>
  <li>also when i remove the .map i can see that  has a props with expected data in it using react dev tools .</li>
  </ul>