Ndtyjky

I'm having issues with a passed down prop. I'm trying to render an array of objects in a list. However, the prop returns the results, and then immediately turns it to 'undefined'. Open dev tools to see result in console.

Parent component:

import React, { Component } from 'react';

import './App.css';



import { SearchBar } from '../SearchBar/SearchBar.js';

import { SearchResults } from '../SearchResults/SearchResults.js';

import { Playlist } from '../Playlist/Playlist.js';



class App extends React.Component {

  constructor(props){

    super(props);

    this.state = {

      searchResults: [

        {

          id: 2011,

          name: 'What Makes A Man',

          artist: 'Man As Machine',

          album: 'Nothing but a thing'

        },

        {

          id: 2056,

          name: 'Pushpin',

          artist: 'Man As Machine',

          album: 'Patterns'

        },

        {

          id: 2099,

          name: 'Zombie',

          artist: 'Man As Machine',

          album: 'Patterns'

        }

      ],

      playlistName: ''

    }

  }



  render() {

    return (

      <div>

        <h1>Ja<span className="highlight">mmm</span>ing</h1>

        <div className="App">

        <SearchBar />

          <div className="App-playlist">

            <SearchResults searchResults={this.state.searchResults}/>

            <Playlist />

        </div>

      </div>

    </div>

    );

  }

}



export default App;

the first child component:

import React from 'react';

import './SearchResults.css';



import { Tracklist } from '../Tracklist/Tracklist.js';



export class SearchResults extends React.Component {

  render () {

    return (

      <div className="SearchResults">

        <h2>Results</h2>

        <Tracklist tracks={this.props.searchResults}/>

      </div>

    )

  }

}

The destination child component:

import React from 'react';

import './Tracklist.css';



import { Track } from '../Track/Track.js';



export class Tracklist extends React.Component {

  constructor(props) {

    super(props);

  }



  renderTrackList() {

    let properties = this.props.tracks;

    if (properties === undefined){

      return <h3>Sorry, we found no results</h3>

    } else {

      properties.forEach( track => {

        console.log(track);

        return <Track key={track.id} track={track} />;

      })

    }

  }



  render () {

    return (

      <div className="TrackList">

        {this.renderTrackList()}

      </div>

    )

  }

}

I have attached the other components just for clarity. They are as follows:
playlist:

import React from 'react';

import './Playlist.css';



import { Tracklist } from '../Tracklist/Tracklist.js';



export class Playlist extends React.Component {

  render() {

    return (

      <div className="Playlist">

        <input defaultValue='New Playlist'/>

          <Tracklist />

        <a className="Playlist-save">SAVE</a>

      </div>

    )

  }

}

searchBar:

import React from 'react';

import './SearchBar.css';



export class SearchBar extends React.Component {

  render() {

    return (

      <div className="SearchBar">

        <input placeholder="Enter A Song, Album, or Artist" />

        <a>SEARCH</a>

      </div>

    );

  }

}

Track:

import React from 'react';

import './Track.css';



export class Track extends React.Component {

  renderAction (isRemoval) {

    if (this.props.isRemoval){

      return <a className="Track-action" onClick={this.removeTrack}>-</a>

    } else {

      return <a className="Track-action" onClick={this.addTrack}>+</a>

    }

  }



  render () {

    return (

      <div className="Track">

        <div className="Track-information">

          <h3>{this.props.track.name}</h3>

          <p>{this.props.track.artist} | {this.props.track.album}</p>

        </div>

        <a className="Track-action">{this.renderAction}</a>

      </div>

    )

  }

}

Please note that this is still a work in progress. So a lot of the detail and event handlers still need to be programmed.

Instead of


properties.forEach( track => {
console.log(track);
return <Track key={track.id} track={track} />;
})


write


return properties.map( track => {
console.log(track);
return <Track key={track.id} track={track} />;
})


OR

.map without return


return properties.map( track => (
console.log(track);
<Track key={track.id} track={track} />;
))