React: How to get input value (dynamic text input field)

(We're free online community, meet other makers!)

How to get input value in React? #react #reactjs #webdev

Article based on this React tutorial:

Getting input value from HTML input element isn't straightforward, especially if you're learning React for the first time. You need to know how useState hook works, and how React updates DOM.

React Tutorial Chapters (it's a bit meticulous, but that's what helps people open the right chapter when searching for something specific on Google):
00:00 How to get text input value in react
00:20 Creating useState object to control input value (val and setVal setter function)
00:26 how to usestate to add dynamic input value in react
00:48 Replacing input value to dynamic val object from useState
01:13 Creating a clickable Button in react's main component
01:22 how to create an event handler function for button click
02:23 Create onChange handler for input box text value (changes and updates when typed)
02:26 how to create event function to handle change in dynamic text input box
03:01 Using onChange event's Event.Target.Value to update React's input value state

Why you can't simply type into react input box? Well, that's just how React works. To get input value you first have to wire it into a state variable using useState hook, as follows:

const [val, setVal] = useState("Default input value");

You will need to use setVal function here, every time a new character is typed into the dynamic input component.

[udayhalankar]

Thanks for the tutorial...I wanted to ask how can I get values for multiple fields

[sreejithmohanan]

how to get values from two input fields and how to display it with a single button click.

[tullynhom]

Fala um pouco mais perto do microfone!

[iwjtwxw]

This is not working for me. This is the logical approach, and this is exactly what I've done however it's not working. I have a form where a user can dynamically add and delete input fields (it's a poll app and they can add/remove answer fields). I map over an array of input properties to create the input fields, none of the onChage events fire for these fields, literally zilch. Any fields not dynamically created work just fine. Using React 18, useState and onChange.