Using Props in React

In this section I am going to focus on importing list of videos.

When we use functional component the props object will arrive as an argument to the function. const videos = props.videos; this is the array of videos. {props.videos.length} so this is saying that any video that is getting passed in here we are just going to print the length out. In a functional component the props object is an argument. In a class based component props are averrable anywhere in any method we define as this.props.

We used className to avoid naming conflicts with the keyword class from class component. Finally we are exporting this component so other files would be able to use it export default VideoList;

We initialized our state to an empty array and then we kick off our search. The search is not an instantaneous oeeratoration it is a network request in which it takes some amount of time. In between the time it takes the first render of the component to fetching this data and setting it on our state that takes some time and during that time the length of videos is equal to 0 that is the reason that we see 0 for half a second when refreshing the page.
 this.state = { videos: [] };

When it is first rendered it does search of surfboards and it gets the response from this.state

App is the parent of video list and video list need to get access to the videos that are in the app state. So VideoList need a reference to the list of videos. Basically we need to pass some data from the parent component App into the child component VideoList. passing data from the parent component App to the child component VideoList we are passing the list of videos just by defining a property on the JSX tag.

Here we are passing video list to render method. Passing data like this is referred as passing props in React. The data that we are passing from App to VideoList (videos) is referred to as a prop. So we are passing prop videos to VideoList. Anytime when App re render VideoList will get the videos as well.

So now we have a functional VideoList component and it has array of videos to render. Now we have to render one video list per video. Our video list component will receive props that contain an array of videos so we just loop over this array and for each video will generate one instance of video list for each item.

Now each VideoListItem which is intended to show a single video now it will show a single li with a video.

A map is a built in method that is a property of an array. For each element of videos we will have a function that is getting called with a single video. It will return a VideoListItem and we will pass it the video as a property named video. Finally we will save this array in a const to save the result of the function. Finally we will return it as a JSX.