Day 10 of 100days of code

Controlled Elements

By default, the input fields maintain their own state inside the DOM, making it hard to read their values and leaving their state right there in the DOM. In React, we keep all the state inside the React application and not inside the DOM. So, we use a technique called controlled elements. With this technique, it is React that controls and owns the state of these input fields. Since we want to keep the data inside the application, we need some state because the form data changes over time, and we want our application to be in sync. To implement the controlled element technique, we follow three steps.

Input element:

Three steps to follow:

• First is to create a state variable for our input element. Since this is the description, we define it like so at line 8👇👇, and notice we set the default value as a string.

• The second step is to use the state as the value of the input field. We specify the value inside the input element and set it to our description state variable in this case. At line 22 👇👇

When inspecting the page, we encounter a warning. Following step 3 will resolve this issue.👇👇

• Now for the third step, we need to find a way to connect it to the actual value we write into the input field. Because no matter what we write into the input field, the value won’t change in the state variable (“”), and you probably can't see what you're writing👀👀.

So now we need to add the event handler on the input element which listens for a change event in the value of the input using the onChange prop. This takes in the event that was fired, in this case, a change event, and updates setDescription to e.target.value. (Note here: e.target is the element, which is an input in our case, and e.target.value is the value of the element. Line 24👇👇

Now, if you type, it will update the default value of our state variable. Let me explain more in the console; let’s inspect with developer tools.

So, initially, it was the default value here👇👇

And writing "Hello" in the input field updates the state. 👇👇 Try writing and see how the text you type inside the input field updates and gets synchronized with the state variable.

You can try console.log(e.target.value) in the onChange event handler as you write to see how it works. The result of this👇 will be the logged values of the input as you type.

Now, with React controlling the state and the onChange event handler, whenever you type into the input field, a change event is fired off. You can react to this event with the onChange event handler, allowing you to update the state and keep it synchronized with the input field's value in real-time. This controlled approach ensures that React manages and maintains the state, providing a more predictable and manageable way to handle form inputs.

---

Select element:

Now, since the select element is also a form element, we can apply a similar approach. We create a state variable with its default value for the quantity which is of number data type, then set the value attribute of the select element to the state variable. React now controls the state, and to enable the select element to update itself when the value changes, we add an onChange event handler. This handler performs the same steps as we did when setting up the input. I'm going to implement all three steps in one image.

Note: While React updates the state as a string by default, for numeric values like quantity, we need to explicitly convert it to a number. This ensures that the state reflects the correct data type, preventing any unintended issues.

We can achieve this by using the Number function in the onChange event handler. Line 20👇

Result👇👇

---

Getting form data

Now, let's practice retrieving data from the form by creating a new object called newItem and logging it to the console when we click on the add button. Take a look at line 13👇👇

Now, let's set the values.👇👇

Click the 'Add' button and check the console below👇👇

---

Now, let's implement the functionality to prevent the submission of empty input fields without a description. This involves simple JavaScript code, which can be added at line 13.👇

Now, we also want to clear all input fields after submission, resetting them to their initial state.👇👇

Food for thought: Now, to transfer data from the Form to the packingList, we can't use props directly since they are sibling components. I'll delve into this further later when we begin thinking in React.👀😂

Thank you for reading and have a great day👌🎉💪