How to pass state from parent to child as props then from that child to it s child as props in React-CodePudding

For now everything is static data .

I have a parent sate: an array containing 4 objects like so :

 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
    }
  ]);

i pass this state to the child in the return with this it works as expected :

return (
 <SearchResults searchResults = {searchResults} />
)

and from i pass it to :

import React,{useEffect,useState} from "react";
import './SearchResults.css';
import TrackList from '../TrackList/TrackList';


export default function SearchResults({searchResults}) {
    return (
        <div className="SearchResults">
            <h2>Results</h2>
             <TrackList tracks = {searchResults} />
        </div>
    )
}

now is where things got me confused.

i try to map the data from the array to the child of this component like this(this is the whole component) :

import React,{useEffect,useState} from "react";
import './TrackList.css';
import Track from '../Track/Track'

export default function TrackList(props) {
    return(
        <div className="TrackList">
            {
                props.tracks.map( track => {
                    <Track track = {track} key = {track.id} />
                })
            }
            
        </div>
    )
}

and i get this error with the local server displaying a white screen [1]: https://i.stack.imgur.com/5niRQ.png

i tried destructuring and assigning props value to a variable before mapping but didn't work .
also when i remove the .map i can see that has a props with expected data in it using react dev tools .

CodePudding user response：

you probably need to provide tracks props like this...

 <SearchResults tracks = {searchResults} />

CodePudding user response：

you need pass props to SearchResults component not a param

like this

import React,{useEffect,useState} from "react";
import './SearchResults.css';
import TrackList from '../TrackList/TrackList';


export default function SearchResults(props) {
  return (
    <div className="SearchResults">
        <h2>Results</h2>
         <TrackList tracks = {props.searchResults} />
    </div>
  )
}

CodePudding user response：

You always can view what you transfer to props with console.

console.log(props);

You need add console.log(props); before return statement, like this

import React,{useEffect,useState} from "react";
import './TrackList.css';
import Track from '../Track/Track'

export default function TrackList(props) {

console.log(props);
    return(
        <div className="TrackList">
            
        </div>
    )
}

CodePudding user response：

I have reproduced your code in a sandbox, but I have excluded the Tracks component. I don't see any bug, please refer to it and let me know if you need any more help. Also, when using map or any other function you need to either use the return keyword or avoid using the curly braces {}.
For example, inside TrackList function:

{
     props.tracks.map( track => { //here avoid this or use 'return' keyword inside
          <Track track = {track} key = {track.id} />
     })
}

//Like this:
{
     props.tracks.map( track => 
          <Track track = {track} key = {track.id} />
     )
}

//or
{
     props.tracks.map( track => 
          { return <Track track = {track} key = {track.id} /> }
     )
}

Link to Sandbox
Please accept the answer or upvote if this helps, thank you!