如何在 React.js 中将 state 作为道具从父母传递给孩子，然后从该孩子传递给它的孩子

Question

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.

Answer 1

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

Answer 2

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

Answer 3

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!

Answer 4

The issue is not in the components that you have mentioned, it is in the Playlist component, wherein you have loaded the TrackList component without the tracks prop. Please accept the answer if it helps your case. Thank you!