CODEWITHSUNDEEP
javascriptreactjsreact-hooks
Helsinki
Helsinki

Reputation: 13

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

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.sstatic.net/5niRQ.png

Upvotes: 1

Views: 60

Answers (4)

Hasan Riza
Hasan Riza

Reputation: 489

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

Upvotes: 0

Hasan Riza
Hasan Riza

Reputation: 489

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!

Upvotes: 1

RomaZakharov
RomaZakharov

Reputation: 34

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

Upvotes: 0

Ramesh L
Ramesh L

Reputation: 59

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

Upvotes: 0

Related Questions