How to pass state from parent to child as props then from that child to it s child as props in React.js

Helsinki 0
Viewed 53

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 .
react-hooks reactjs javascript
4 Answers

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!

Hasan Riza0

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

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

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

Hasan Riza0
Related