So I’m follwing Stephen Grider’s Modern React course on udemy, and there’ something that is not quite clear to me, I can’t find any helpful answer on the Q&A section so I hope someone can clarify this to me before moving on with the course.
First, let me provide with the code for some context:
class App extends Component {
constructor(props) {
super(props)
this.state = { videos: [] };
YTSearch({key: API_KEY, term: 'surfboards'}, videos => {
// Same as {videos: videos} as key and value are the same, ES6 syntax
this.setState({ videos });
});
}
render() {
return (
<div>
<SearchBar />
<VideoList videos={this.state.videos}/>
</div>
);
}
}
// Take this components' generated HTML and put it on the page
ReactDOM.render(<App />, document.querySelector('.container'));
My doubt comes with this piece of code here <VideoList videos={this.state.videos}/>
I know how we define state and how to change it (Here we are just getting the value of state property videos) and I know we define variables in React using brackets {}
but what’s “videos”? The name of the variable?
I am playing around with the code but if I change the name of the key (I think videos is a key here?, not sure) nothing works. If it’s a variable then the name can be anything.
For more context, this is the code from the child component that we are passing the data to.
const VideoList = (props) => {
const VideoItems = props.videos.map(video => {
return <VideoListItem video={video} />;
});
return (
<ul className="col-md-4 list-group">
{VideoItems}
</ul>
);
}
I know with this code we are just using map to iterate through the array we defined in our state (VideoListItem is just a <li></li>
component)
but againt, something I don’t quite understand is happeing: video={video}
For example I have no problem understanding the following code:
<div>
<input
value = {this.state.term}
onChange = {event => this.setState({ term: event.target.value })} />
</div>
“value” in this case is a valid HTML attribute and we are just setting the value of the input tag to be equal to whatever the value os state is, but video? I am completely lost.
I really want to be able to understand this before moving on, I feel it’s a very important concept. Any help is appreciated.