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;