Lesson 04

React.js Box Component Color Controlled via Text Field

Continuing from the example of using the library React.js to build user interfaces. In this particular situation, a colored Box component whose color is controlled via a property. Now the goal is to change the color of a Box component using a text field.

Using the hook useState, you can keep track of another state variable to hold the color name. That value is tied to an input of attribute type having the value text. That input is placed next to the existing button to change the color.

You learn about controlled components, those whose value and onChange props are defined explicitly and controlled using a React state value. A function is defined to handle the changing of the text. That is, when the user types into the text field, the onChange handler function is called to update the value in state.

An event handler function has a parameter called event that includes details about who triggered the event. In particular, you can use the event target to access the input element so that you can retrieve the value that was typed by the user.

You can call on the mutate function for the color name to update its value after the user types into the text field. Then, the click handler for the button to change color is modified to set the Box component color prop to the value that was typed into the text field for the color name. That is, the click of the button takes the state value for color name and uses that as the prop passed to the Box component.

The lesson also briefly mentions how in the past React.js components used to be mostly written with classes instead of functions. But that paradigm has since been changed and writing functional components is more encouraged now. Questions about the order of JavaScript code statements are also addressed, like the definition of a function inside a function and the order the functions are defined.

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72

Summary

Summary of Transcript on Controlled Components in React

Overview

The speaker discusses how to control the background color of a box using text input in React, introducing the concept of controlled components. The focus is on managing the state of an input field and how to change the color based on user input.

Steps to Implement

Create Input Field:
- Add an input of type text where users type the desired color (e.g., "yellow").
Control the Input Value:
- Use React's useState hook to manage the input's value as state:
```
const [textColor, setTextColor] = React.useState('');
```
- Set the input element's value to this state variable.
Handle Input Changes:
- Implement an onChange event handler to update the state as the user types:
```
const onTextColorChange = (event) => {
    setTextColor(event.target.value);
};
```
Change the Background Color:
- Add a button that, when clicked, changes the background color of the box to the current value of textColor:
```
const changeColor = () => {
    setBoxColor(textColor);
};
```
Importance of State:
- React requires state management for reactivity. If you use a regular variable instead of state, changes won’t trigger a re-render, leading to unexpected behavior:
```
// Incorrect way (not using state)
textColor = newValue; // this doesn't trigger re-render
```

Additional Clarifications

The order of variable declarations and function definitions is crucial:
- If a variable is used before it’s defined, it will lead to errors due to JavaScript’s variable hoisting and scope rules.
Historical Context:
- React's evolution involved moving from class-based components to functional components with hooks, changing how state and effects are managed.

Conclusion

The tutorial emphasizes the necessity of using state in React to create controlled components that respond to user input dynamically. Understanding this concept is essential for effective React programming.

This summary is designed to encapsulate the key points of managing controlled components in React as discussed in the transcript.

Video Transcript

Okay, now I want to make the challenge harder. Can we control the color by text input? Let's try to do it. So I'm going to add an input here. Input, type text. Like that. And I'll type the color here. The yellow. And when I click change color, I want this yellow that I typed to be the new color for the first box. How can we do that? So this is about controlling a component. You're going to hear that term, controlled components. So the input by itself, we cannot have no control over the value here. Okay, how can I get, well of course in vanilla JavaScript, you can click that and then the function here is going to go here, document, get element by d. So you get this input and then you see the value attribute. But because you got to do the react way, it's a little different. Let's do react way. So first we got to control this input by adding the value attribute here to be some value that we're going to store in the state. So let me say text color, okay? Now we're going to create that. Remember, it's a weird but it's always the same way. React.useState. Now you need to call this function given an initial value. Let's say the text is empty initially. So I'm going to use an empty string here for the initial value. Now this returns an array of two elements, right? The first being how can access the actual text. And the second with a function to change that. So we can use this structuring with this notation to extract the first element of the second into any arbitrary name we want. I usually use descriptive name, like color, comma, always followed by the set, whatever the previous name I used. It's just a convention, but you can use whatever. By the way, if you don't know this case, it's called camel case. The first word of the letters lower and then every subsequent word the first letter has to be capitalized. So it's camel case, like a camel. Camel case, like this. Just a convention we use in JavaScript. So the languages might use underscore, like snake case. Or Pascal in C sharp. Okay, now we got text color here. We can use that for the value of the input. But that's not really doing anything. Right? We can type. Actually we can't type. Why can't we type? Because we fixed the value on the text color, which is initially empty. So that's why when I type anything, nothing happens. Now this is now a controlled component. So you have to manually write code so that whenever you type anything, it will change the value of the text color that's in the state. Now to do that, we can use on change prop, like this. And you can pass as the value a function. Okay, let's create a function there. Let's say on text color change. Now the name of the function is arbitrary. I just like following this convention on whatever name of the variable and then the event. Okay, it's up to you to change your own, use your own convention. Now I defined a function here on text color change. And then I'm going to take that like that. Now, remember I can type something here. Now to access that, I need to access the event variable that's usually passed in as the parameter to any event handle function like this one. So when you have an input, you can access the whatever the user type with the event object dot target dot value. Okay, there's just the way it is. So there's an event object inside, there's the target object and then inside there's a value. That's whatever the user typed. Okay. Now since we got access to whatever the user typed, we need to assign that to the new text color here. So we're going to say, remember we have a set text color function can use that set text color and then passing the new value, which is going to be that. Okay, now if I save that and try to type it a now I see the a is no longer just empty right why why does that happen because when I type the character, it calls the on on change this function and they call set text color with the a letter. So the value of text color now becomes a. Okay. And then I can type in every type and type of character it calls this function and sets the value of text color. Okay, every time I type any character. Okay, now that's nice we got that stored. Now it's finally time for us when we click change color, we want to change the color background color of the first one. Remember the first box line 32 is controlled by the box color. That's a variable that's in the state. Now how can we change that well set box color that's already the code for the on change color click that is called when I click change color but now it's hard coded to green. How can I change this to be whatever is typed in the input type text anybody have an idea what should be typed there. So it should be text color. Okay, because that's what we hold. That's where we hold the value for whatever the user types. So instead of green now we say text color. So let's say if it works. So I type blue and click change color. Now you can see a change to blue. If I type green, click change color. Now it's changed to green. Now we see the questions. Why do you use a state on property on change text if that is a variable. Can you just just a variable not state. Yeah, so we cannot use just the variable because of react. Remember it's reactive only to the state change. If I did something like the text. Let me see on change that color like this, right, a variable like just a plain variable with the text. And I were to change the thing. It doesn't change the state. So the state a state not changing means it never re renders the thing. So let me see if I can demonstrate that here. So we have the text color variable. If I put it in the input types. Text here, the text color. So we're using the variable now. So if I save that it's always blue. I cannot change anything. And if I go on set text color here I will have to say the text color equal right something like that then to do that I got to move this up maybe. Let me see. So you can see nothing happens. Even if I type even though we're calling. Okay, because react doesn't know that you changed. It didn't re render anything. So the reason we have to always use state is so we let react know hey, you have to react to this to this variable. Every time I change the value of this variable you have to react to it and re render everything so things are updated. If you don't use that react doesn't know. It has no idea about this variable here. The text color. So I try to change it nothing happens because it doesn't know. It won't change it. It won't re render it. Okay, so let me revert everything back to the correct. That's it. Okay, so that's the react way. If you have anything you want to change use a state so add knows about it and it will react and re render according. I hope that clarified little bit. It might have updated but component one pre render to reflect. Yeah. Thanks to anybody. Anybody any questions that okay. Hi, hi, Mark. Hey, I have a question. It's probably stupid, but I'm going to ask it anyways. For the sake of understanding everything that's typed here. I'm curious why it's in the order that it's in and why for example line 24 wouldn't be at the very top or almost at the very top and then for the other pieces to sort of be underneath it. I don't know if that makes any sense. If you put 24 at the top by version of the language of JavaScript, it will return right away without executing 14 and 15. So we won't know about those things. So if I do that to get an error cannot access that scholar because it doesn't know what it is. You're returning right away from the function meaning everything after that return is ignored. So it gets out of the function early. Got it. It's a matter of programming language and scope of the variables. As for the order of the functions, this one doesn't matter. I can have it like this or like that. Okay. And the reason I have it within the app instead of outside is because I need to access these two variables, right? There's no way I can access these because they're local to app. So there's not available outside. So I have to have them inside. And it's just the way they wrote it for this kind of way of doing React. In the beginning of React, they actually use classes. If you're a familiar object oriented programming, they define the components using a class and then you can instantiate objects of that class. Those are the components. But now they want to do it this way, defining all the components using a function and using hooks. And then you can define the functions within the functions. I know it's a bit messy if you're, I don't know, you're experiencing other languages. To me, it's kind of messy a little bit coming from another background of object oriented, but that's just the way it is now.