Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 1023 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Break up components into smaller pieces using Functional Components

2:21 React lesson by

We are going to ensure our app is structured in a clear way using functional components. Then, we are going to pass those components state values from the parent class component.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

We are going to ensure our app is structured in a clear way using functional components. Then, we are going to pass those components state values from the parent class component.

Avatar
Stephen Bussard

CAUTION: I recently ran into a massive ui problem when I used the index argument of the map function as the key to a mapped react component.

The state was a list of objects.
The container component sorted the list of objects in the state and mapped it to an smaller ui components.
It worked completely as expected until I added a new item to the state and sorted / mapped it again.
At that point react got confused about which properties belonged to which mapped component, and it had me questioning everything I knew about react.
Once I switched to using a uuid as a key for the mapped component, everything started working well again.

In reply to egghead.io
Avatar
Rory

Thanks for your feedback, I updated my video

In reply to Stephen Bussard
Avatar
Stephen Bussard

You Rock!

In reply to Rory

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.

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.

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.

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.

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.

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.

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.

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?