Change a Stateful React Class Component to a Function Component with the State Hook

Joe Previte
InstructorJoe Previte
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 years ago

In this lesson, you will learn how to take a class component which uses state and convert it to a function component which utilizes the State Hook. The state hook returns a two-item array: the first item is the state value and the second value is the function to update the state value.

Remember, Hooks can only be used in function components.

Instructor: [00:00] This is what we're going to be working with, a simple class component, should look pretty familiar. This is what it gives us, a simple feedback text area, which we can submit to an API, which is just console logging our texts that we add.

[00:18] First thing we're going to do is copy all of this and create a new file called feedback.function.js, where we'll refactor it. First thing we'll do is import useState, which is the State Hook that we're going to be using. Next thing we'll do is export a function.

[00:37] We'll add the parentheses, and then we'll delete until here and make it just a simple function that we're exporting. Next thing we'll do, we'll take a look...this is how State is declared in a class component. We're going to delete that and instead use the State Hook. We do that by declaring an array which returns two elements, the first being the actual value, in this case text, and then a function normally called SET and then the name of the value.

[01:09] That is something that we're destructuring from useState. There, we pass an initial value. To backup, we have some array destructuring, we have the first value which is text, the second value which is a function to update that and then when we call useState, we pass the initial value. You can get this when you hover over useState.

[01:32] You see a return to Stateful Value, and a function to update it. That's our state. Now let's go through and start updating these functions. Handle submission. We need to add the function keyword. Inside of our console log, we need to change this dot state, dot text instead to text.

[01:52] Then when we reset text to back to an empty string, what we need to do instead is just call Set Text and we can delete this and just pass in our empty string. You can see it's starting to look a lot cleaner. We do the same thing here. Function, and then instead of calling this dot Set State, what we'll do is call Set Text and we pass in our new value.

[02:21] Next thing we'll do is delete this render method, because we don't need that anymore. We don't need to call this dot Handle Submit. We just need to call Handle Submit. Here we just need value to be text and here we just call Handle Text Change. Now what we'll do is change this to our function example and at the top, what we'll do is change this to feedback function component.

[02:57] Then we'll go into App, and we'll import feedback function component from components/feedback/feedback.function. Cool. Then we'll go down here and we'll use it and now if we take a look, we'll have two. We'll just make sure that it's still working. We'll see that it is. That's how you change a stateful class component into a function component with the State Hook.

~ 4 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today