Controlling Form Values with React

Kent C. Dodds
InstructorKent C. Dodds

Share this video with your friends

Send Tweet

In this lesson, we'll talk about controlling the value for inputs, textareas, and select elements. We'll see how to manage the state ourselves while still allowing the user to update the values themselves.

Jose
Jose
~ 4 years ago

A good homework assignment may be to ensure custom values (e.g. banana, strawberry) remain in the comma-separated and multiline inputs after command-clicking a multi-select option.

Dominik Sipowicz
Dominik Sipowicz
~ 3 years ago

Why availableOptions are declared static?

Kent C. Dodds
Kent C. Doddsinstructor
~ 3 years ago

No reason in particular. I like to do that to indicate that availableOptions are relevant only to the component that's using them. But it'd work just as well to declare them as a regular variable and use them that way.

Billy
Billy
~ 3 years ago

I was reading the beginner docs from the React website and found this: https://reactjs.org/docs/lifting-state-up.html

Woudn't that be a better approach for this particular scenario?

Kent C. Dodds
Kent C. Doddsinstructor
~ 3 years ago

I'm not sure I follow Billy. The reason you lift state up is when you want to share state between two components that are in different areas of the tree. So you put the state in the least-common-parent of those components. That's the process called "lifting state up."

In this example, I was showing how to control the state of form fields.

Martin Funk
Martin Funk
~ 3 years ago

Was just rerunning the code from this example. It works almost as expected, but on my machine the select of multiple values in she multi select fails.

Martin Funk
Martin Funk
~ 3 years ago

Forget my question above. Using the 'shift' or the 'command' key changes situation quite a bit ;-) Sorry, my bad.

Lokesh Sanapalli
Lokesh Sanapalli
~ 3 years ago

Hey Kent,

Great course. One suggestion is, how about giving the initial code on codesandbox so that we can follow you by editing that code ???

Kent C. Dodds
Kent C. Doddsinstructor
~ 3 years ago

Hey Lokesh!

That's a great idea. I'll let the Egghead folks know :)

Modesta Naciute
Modesta Naciute
~ 2 years ago

Hi Kent! thanks for an awesome condensed course, and... pls help! I ran into a problem with multiSelect (it's also not working properly in your code example on Codebox). For some reason <code>Array.from(event.target.selectedOptions)</code> creates an array with only the LAST selected option, not ALL of them. However, if I do <code>console.log(event.target.selectedOptions)</code> I see HTMLCollction of a correct number of items (say, if I selected 3 options, I see 3 of them in HTML Collection). What do you think could be the problem? Thanks a lot!

Kent C. Dodds
Kent C. Doddsinstructor
~ 2 years ago

Sorry Modesta, but it's working fine for me (just as demonstrated in the video).

Modesta Naciute
Modesta Naciute
~ 2 years ago

Yup, I totally forgot to hold CMD key pressed to multiselect... no emoji to justify that, just shame :D

Camilo Rivera
Camilo Rivera
~ 2 years ago

Why bother filtering the multiSelect state value on handleCommaSeparatedChange and handleMultilineChange?