1 00:00:02,210 --> 00:00:09,290 State is a crucial concept in React and with our knowledge about state, we can now also make sure that 2 00:00:09,290 --> 00:00:14,020 we don't just create a dummy goal but we actually reflect the real user input. 3 00:00:14,050 --> 00:00:16,090 So for that, let's go back to new goal. 4 00:00:16,280 --> 00:00:24,850 What do we want to do is we want to store the user input in some variable on every keystroke so that 5 00:00:24,860 --> 00:00:32,300 we have the latest value entered by the user and then pass that entered value to props on add goal or 6 00:00:32,300 --> 00:00:36,940 to our new goal here instead of that hardcoded dummy text we have at the moment. 7 00:00:36,950 --> 00:00:42,410 So here in new goal, I want to capture the user input here and send this instead of my hardcoded text 8 00:00:42,410 --> 00:00:44,530 here as part of the new goal. 9 00:00:44,870 --> 00:00:46,810 So we could create a variable here, 10 00:00:46,970 --> 00:00:57,410 user input or entered text maybe, which is an empty string initially and here on input, there actually 11 00:00:57,410 --> 00:01:01,300 is an on change event we can listen to which is fired on every keystroke. 12 00:01:01,310 --> 00:01:02,540 So now we can add a function, 13 00:01:05,340 --> 00:01:13,740 text change handler, there we will get an event object and that event object will hold the user input, on 14 00:01:13,740 --> 00:01:21,350 event target which refers to the input element, .value and therefore we could set enter text equal to 15 00:01:21,350 --> 00:01:26,570 that. Now entered text will change with every keystroke 16 00:01:26,620 --> 00:01:32,510 once we bind on change to text change handler, like this. 17 00:01:32,720 --> 00:01:37,880 Now here in new goal, we can use entered text, 18 00:01:37,880 --> 00:01:43,590 so what the user entered here and thereafter let's also console log the new goal here so that we 19 00:01:43,590 --> 00:01:51,810 can see that this works. If we now save this and I enter test here and I click add goal, we see this works 20 00:01:51,840 --> 00:01:58,820 and this is output here. This approach is generally fine but it can have one tiny flaw, 21 00:01:58,820 --> 00:02:00,190 what if we want to reset this 22 00:02:00,200 --> 00:02:09,790 after adding a new goal? Of course we can go to our add goal handler and once we created the new goal, 23 00:02:09,790 --> 00:02:13,250 we can of course set entered text back to an empty string 24 00:02:13,300 --> 00:02:15,280 but of course this won't do anything. 25 00:02:15,280 --> 00:02:18,700 If I enter this goal, you see this is not reflected here, 26 00:02:18,700 --> 00:02:20,500 why is it not reflected? 27 00:02:20,500 --> 00:02:22,490 Because the new goal component didn't re-render, 28 00:02:22,510 --> 00:02:25,600 this is not state we're managing, this is a regular variable, 29 00:02:25,600 --> 00:02:27,250 so of course we can change it, 30 00:02:27,280 --> 00:02:31,700 of course we can use the changed value but if we then set a new value to it, 31 00:02:31,900 --> 00:02:37,440 this is not reflected on our input because this input only has a connection to the text change handler, 32 00:02:37,480 --> 00:02:42,850 it does not know that it should reflect the current value stored in entered text. 33 00:02:42,850 --> 00:02:48,640 Now we could tell the input component that it should do so by binding its value prop, we can bind this 34 00:02:48,640 --> 00:02:56,500 to entered text and with that we tell the input component, hey the value displayed in the input should 35 00:02:56,500 --> 00:02:58,330 be the value stored in entered 36 00:02:58,330 --> 00:03:03,120 text. If we do that, we'll notice something new, 37 00:03:03,140 --> 00:03:05,990 now we can't type there anymore, if I type here, 38 00:03:05,990 --> 00:03:07,990 the input is not reflected. 39 00:03:08,000 --> 00:03:10,910 Now if you think about it, that makes sense. 40 00:03:10,910 --> 00:03:16,670 What you're telling React is that input should be rendered such that the value is the entered text, with 41 00:03:16,670 --> 00:03:22,640 every keystroke we change entered text but entered text is not state, it's a regular variable. 42 00:03:22,850 --> 00:03:28,250 So that means that we change the variable with every keystroke but React doesn't re-render the input 43 00:03:28,250 --> 00:03:34,610 component, it doesn't reflect the updated value. To React, the value always is an empty string because that 44 00:03:34,610 --> 00:03:41,180 was the last time it rendered this component and therefore this jsx code and therefore this input. 45 00:03:41,180 --> 00:03:46,460 So we need to tell React that this is some state and that when it changes, it should re-render our 46 00:03:46,460 --> 00:03:47,680 jsxcode. 47 00:03:47,990 --> 00:03:55,490 So again we can import use state here and convert entered text, use array destructuring here and use state 48 00:03:55,520 --> 00:04:01,040 is an empty string initially or has an empty string initially here because I'm managing my entered text 49 00:04:01,350 --> 00:04:06,260 and the second element is a function to update the state which I'll therefore call set entered text. 50 00:04:07,370 --> 00:04:15,020 And now here on every keystroke, I set my entered text to the value in event target value 51 00:04:15,050 --> 00:04:20,240 and here we don't need that function form of updating the state because we have a brand new value that 52 00:04:20,240 --> 00:04:22,320 doesn't depend on the previous state, 53 00:04:22,430 --> 00:04:31,970 so we can just update to state like this and now this will re-render this component whenever we type, 54 00:04:32,000 --> 00:04:37,550 whenever we call set entered text, so on every keystroke, which sounds horrible but which is great, React 55 00:04:37,550 --> 00:04:43,460 will do this in a very efficient way and therefore this latest value will be reflected on the input 56 00:04:43,490 --> 00:04:51,200 element and here in add goal handler, if we want to update entered text and reset it, we can therefore call set 57 00:04:51,430 --> 00:04:54,110 entered text and set it back to an empty string 58 00:04:54,250 --> 00:05:00,320 and with that, we now have the best of both worlds. We can enter something here, that all works but we also 59 00:05:00,320 --> 00:05:06,570 can manipulate it and reset after adding a new goal, like this. 60 00:05:06,620 --> 00:05:10,070 So this is now another use case for state management 61 00:05:10,100 --> 00:05:13,940 and of course there are many use cases in a React application 62 00:05:13,940 --> 00:05:20,840 and here we are using state management to create something which is also sometimes called two-way binding. 63 00:05:21,320 --> 00:05:27,410 We're binding the value of the input and on every keystroke, we're updating to value which we then bind 64 00:05:27,410 --> 00:05:34,430 back to the input, so that we always reflect the latest value inside of the input but we also are able 65 00:05:34,490 --> 00:05:36,700 to manage this in a state-driven way 66 00:05:36,770 --> 00:05:42,350 so that we also have a chance of manipulating the value from inside our code up here and reflect this back 67 00:05:42,620 --> 00:05:48,870 into the input in this case. With that, we have another scenario of state management and we are now able 68 00:05:48,870 --> 00:05:50,550 to add our own goals.