A multiple select keeps an array
value is an array, and the handler builds a new array from selectedOptions. Hindi starts selected because it is in the initial array.
Checkboxes and radios are controlled with checked (a boolean), selects with value (a string, or an array for multiple), and every value that comes out of a field, even a number field, is a string you convert yourself.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Build a controlled "Remember me" checkbox and a paragraph that says You will stay signed in or You will be signed out.
Build a radio group for delivery speed (standard, express) that shows the price: ₹40 or ₹120.
Build a select of three themes (light, dark, sepia) that sets a className on a preview div.
Explain it without notes
How do you control a checkbox in React, and why is e.target.value the wrong thing to read?
How do you build a radio group in React? What does the name attribute do?
How do you control a <select multiple> and read its chosen values?
Why should a number field's state usually be a string?
Preview
Console
Nothing logged yet.