Functional Components in React

Let me explain this code:

return <input onChange={event => this.setState({ term: event.target.value })} />

So basically the function onChange will run because it is the event handler. We are setting the state with key term and the new value of the input. Whenever we update the state it will cause the component to automatically re-render and push all the updated information from the render information into the DOM. Because the render method makes reference to this.state.term then every time the component re-render we get the updated this.state.term in the DOM. In other words every time we update the component the state will change. The input is telling the state to change.

Now we are getting all the input from the state to the input the other way around. A controlled component has its value set by state so the value only changes when the state changes. So this set state causes the component to re-render. when it is re-render the value of the input is set to the new value of this.state.term. So the order of operation starts from index.js from <SearchBar /> The search bar we get a new instance of it created in search_bar.js and the constructor is being called and this.state = { term: ‘’}; is set to an empty string. The component renders, the value of the input is set to retrieve the value from this.state.term so its initial value is an empty string. When the user enters some text the state this.setState is equal to the change of the input value. However the value of the input has not changed we only called the event handler with the new value. the event handler runs to return the new value. Whenever setState is called the event will re render and the value of the input will receive the new value of this.state.term finally the component finishes rendering and the new value of the input is finally visible on the screen. SO when the user types something they only triggered an event and because we have updated the state with that event that causes the value of the input to change. In React is more declarative so the value of the input is equal to the state. In case if we want to have a value pre-populated to the text so we will use controlled components. It also allows us to read the value of the input much more easily.

The most parent component that is concerned with a piece of information to be responsible for fetching it. index is the most parent component that we have so all the other components will be the children so the rest of the components will need to use it in order to fetch the data, therefore it make sense that the index.js of the App the top level component should be responsible for fetching the data. In order to get access to the fetch package that we downloaded we need to import it into this file: import YTSearch from ‘youtube-api-search’;

So in this function we are returning objects from Youtube and data returned for videos.

Whenever the app boots up we get a class of App the constructor will run right away and that will immediately kick off a search with the term surfboards. Then the callback function with data will be called with the list of videos.
The object that we are passing has a key of videos and the value is videos that is passed as an argument.
We can condense this using ES6 when key and variable name are the same we can just use the value name which is videos in this case, for example:
this.setState({ videos: videos }); is the same as: this.setState({ videos });
So the list of videos on the state starts as an empty array but the instance of the component that is rendered kicks off a search when the search is complete it will update the value with the new list of videos.

Thank You