Jamming Project: TrackList.js component (and SearchResults.js component?)

Get Help React.js
,
1

I’m following along with the video guide.

[General feedback: The React lessons before the Jamming project are fine in a vacuum, but do not at all prepare a newbie to the scope and depth of the Jamming project, which has its own shortcomings itself.]

THAT SAID, while I am following along with the video guide, and while I [just barely] understand how each of these components are interfacing with each other, I have a question on what exactly is happening in Tracklist.js at Line 10.

Note: I know how .map() works both general and in this instance (though less so relative to in general). This is not a question about .map().

My question

On line 10 in TrackList.js–i.e. this.props.tracks.map(...)–what is tracks referencing?

My educated guess or inference is that it is referencing the tracks attribute on Line 11 in SearchResults.js–i.e. <TrackList tracks={this.props.searchResults} /> .

Is this the correct understanding?

// TrackList.js
import "./TrackList.css";

import React from "react";
import Track from "../Track/Track";

class TrackList extends React.Component {
  render() {
    return (
      <div className="TrackList">
        {this.props.tracks.map((track) => { // Line 10
          return <Track track={track.name} key={track.id} />;
        })}
      </div>
    );
  }
}

export default TrackList;

// SearchResults.js
import "./SearchResults.css";

import React from "react";
import TrackList from "../TrackList/TrackList";

class SearchResults extends React.Component {
  render() {
    return (
      <div className="SearchResults">
        <h2>Results</h2>
        <TrackList tracks={this.props.searchResults} /> // Line 11
      </div>
    );
  }
}

export default SearchResults;
2

Yes, your guess is correct.

An instance of the TrackList class component is not going to be created in the TrackList.js file.
Instead, the component is being exported (export default TrackList;). Whatever component (parent) imports this component (child) will create an instance of TrackList and at that time will pass in a value for a property named tracks.

In SearchResults.js, you can see TrackList is being imported. Then,

<TrackList tracks={this.props.searchResults} /> // Line 11

creates an instance of TrackList and passes in a value for tracks.

Suppose, in the TrackList component we expected a prop named abc i.e. it expected to use this.props.abc, then the parent class would have the responsibility to provide a value for this property at the time of rendering the child component,

<TrackList tracks={this.props.searchResults} abc="blah blah" />
// or if a javascript expression is the value, then use curly braces
<TrackList tracks={this.props.searchResults} abc={...expression...} />

Coming back to SearchResults, the value being provided for tracks for the TrackList component is this.props.searchResults. This property has not been set in the SearchResults.js file, but the SearchResults component is being exported. So, whoever imports this component will be the parent of this component. I think in the project App.js is doing the importing. When the App component creates an instance of SearchResults, it will have the responsibility to provide a value for a property named searchResults. In the App component’s render() function, you will have something like:

<SearchResults searchResults={...expression...} />
1 Like