Break up components into smaller pieces using Functional Components

[00:00] We have an empty React component here. Let's say we're going to write the beginnings of a todos list. Let's write in a text input field, a button, and an unordered list with some example values.

[00:12] We want to keep our app nicely structured so let's start writing some functional components for our app. We'll have an InputField component for the text input, a Button component for the button, and a List component for the unordered list.

[00:28] Now, let's move our JSX elements inside our components. After we've moved everything over, we can then refer to each component from the render method of our Class component. It's important to note that this is our Class component, which is going to be dealing with all of the state of our application, whereas these smaller functional components up here won't be dealing with any state, but they will be dealing with any props values that we pass into them.

[00:58] Let's verify that we can use our Class component to write some state and then pass that state to our functional component. To create some state, we first need to call the constructor method with super, and then, we're going to declare a todos array. Each todos is going to have an id and a name.

[01:18] We can pass that todos array to our List component as a prop. Now, our List component will be able to access the todos array through its props. We can verify that the list is getting the todos array by console looking it from within the list. If we go into our console, we can see that the todos array was log.

[01:41] Now, we can replace the example values that we have in our List component with the example values being passed in from the state. Let's replace each list item with a list item derived from the map method that we're calling on the todos array.

[01:57] We can see that we have the same output, so it's working. Now, we can manage all the state from our Class component, whose values in this case can be passed into functional components.

[02:09] By splitting our app into separate components using our Class component to handle the state, it will become easier in the future to manage our project as it gets more and more complex.