Instructor: 0:00 We need to manage some state because as I type in here, I want to get my name written out there so that I get my greeting showing up. The first thing that we're going to do is I got to get rid of this name variable because that's just a constant variable. It's not going to change over time. I need React to re-render here.

0:22 I have this handle change wired up, and so anytime I make a change, I can update that name value. How do we go about doing that? If we say console.log(event.target.value). I save that and pop open my DevTools. Go to our console right here.

0:42 Then, I type in "Hello." I'm going to see each character is getting printed out and I'm seeing the current value of the field. Maybe I could say, "name = event.target.value," but I'm getting a yellow underline here because I'm re-assigning a const declaration.

0:59 Maybe if I change that to a let, and maybe that will do something for me, but no, that's not doing anything. The reason that is not doing anything you saw, is because this function is being called only one time.

1:12 It's being called when I initially render my component, where I say, "Hey, this app component is a render of the greening component." Re-export that and then the app that we're using will just render that with React on.

1:25 I have no mechanism for saying, "Hey, React, I changed the name value. I want you to re-render this and get some new JSX based on the state update that I have made." That's what React useState Hook is intended to do. It says, "Hey, React, this component can re-render any time this state that I want you to manage is going to change."

1:47 React gives us the state value for the current render, and then it gives you a mechanism for updating that state, which is the state update or function. When you call that function then that will trigger the re-render.

2:01 In that re-render you get that new value of state. That's what we're going to do here, is we say React useState. We'll initialize it to that empty string that we had before. The value that we get back is actually an array where the name is the array at index zero and the set name is the array at index one.

2:26 Whenever we call this function. we're going to trigger a re-render and the name that we get every time that this function is called is going to be the current value of that state. Nobody likes to write their code like this. That's just a nightmare. We're going to destructure it instead.

2:43 We'll say name and setName right their instead. Instead of just reassigning this variable because that's not going to trigger a rerender of our component, what we're going to do is call setName with that event target value.

2:58 With that, we've got a working field. Hurray. Kent is great. You need to type good things about yourself every now and then, just to make yourself feel better. That is how this works.

3:13 We create a useState hook right here saying, "Hey, React. I want you to manage some state for me. Here's the initial value of that state and then as I call setName, I want you to trigger a rerender of this component, so that the next time this component is called, that name value will be whatever I set it to."

3:31 In our case, we're going to just set it to whatever the current value of the input is on every rerender of this component. That gets us this really fancy greeting capability here.