Passed state is undefined in child component

I have a state in App.js that contains some songs… I pass it to another component SearchResults which passes it to Track component… This is where the problem is. I can type ‘console.log(this.props.searchResults)’ and i can see the array of songs on the console.

But if i put it in the return statement like this:

import React from 'react';
import Track from '../Track/Track';
import './TrackList.css';

class TrackList extends React.Component {
  render() {
    return (
      <div className='TrackList'>
        { => (
          <Track />

export default TrackList;

It says ‘TypeError: this.props.searchResults is undefined’

How can it be defined in the console.log and undefined when i access it in the return statement???

I hope i explained that well!!!

Thanks in advance for any help…

So i am passing state from App to SearchList… Then SearchList props to TrackList…
When i log props in SearchList it shows one object with the passed state.
When i log props in TrackList it shows 2 objects!!! one with the passed array from SearchList and one which is undefined!!!

Okay so i found the problem… I was calling TrackList from another component also… which is why it was getting 2 objects for the props… My question now is if my component is receiving props from 2 different components how do i access the one i want??? or is that possible??

1 Like

Hello, @beta7421401032.

I can’t say exactly why you can access this.props.searchResults from your console.log() statement, but it is undefined inside your return statement other than the obvious that it’s an issue of scope. That aside, you shouldn’t be using above. You should be using so that each element of the tracks array is rendered as a Track component. See instruction #34.

Hi sorry for the late reply… I got the issue sorted… It was getting 2 props becuase it was getting called from 2 other components… Turns out my problem was just me not understanding how it worked… Cheers for the reply though… And Merry Christmas!!!

1 Like