- 16Controlling Form Values with React8m 48s
Controlling Form Values with React
Share this video with your friends
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.
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.
Why availableOptions are declared static?
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.
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?
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.
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.
Forget my question above. Using the 'shift' or the 'command' key changes situation quite a bit ;-) Sorry, my bad.
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 ???
Hey Lokesh!
That's a great idea. I'll let the Egghead folks know :)
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!
Sorry Modesta, but it's working fine for me (just as demonstrated in the video).
Yup, I totally forgot to hold CMD key pressed to multiselect... no emoji to justify that, just shame :D
Why bother filtering the multiSelect state value on handleCommaSeparatedChange and handleMultilineChange?