How to Handle Input in React with Hooks

  • Create two useState hooks, the first one will be set to an empty string and the second one set to an empty array.
  • Below those, write a function that will pass in the event parameter, and in the body of the function prevent the page from refreshing on default every time we type something by calling e.preventDefault()
  • On the next line we will call a function called addItems (this can be named anything) and pass in the value of your empty string you made earlier with useState. After that call the setter function for your empty string and update it with empty another empty string.
  • Time to build the addItem function, pass in a parameter called text and inside the function body create a new variable call newItems and use the spread operator and right after add the array value, then a comma and an object with our text parameter we passed in.
  • Now, set the array with our new variable we just created using our setter function and passing in our newItems variable.
  • Now create a form tag inside of the main div and call the onSubmit handler and set it equal to our submit function and put curly braces around it.
  • Create an input tag inside of the form and set the type equal to text, the value equal to our string value we made and set the onChange handler equal to an arrow function with the event parameter passed in and call the setter function for your string value we made in the beginning. Make sure to add e.target.value inside of the setter function for this part.
  • Now create a button with the onSubmit handler and set it equal to the submit function we created.
  • Finally, we want to show the results of our array. A nice way of doing this is by using a map function. Just below our form tag, create a new div and inside that div write some curly braces. We will be calling our array and mapping over it in these braces.
  • It’s good practice to create an index or some sort of identifier for each item when mapping an array of data. To keep things simple, I will indexing over it, however, this can also be done using unique id’s as well.
  • Inside of our map function we will create an arrow function and pass in variable we will call later to show the data (this can be anything, I set mine to item) and then an index.
  • Now, instead of using curly braces to hold our code in the function, we will be using regular braces because we want to return JSX that will display our items and not actual raw code.
  • Inside the map body create a div and give it a key of our index we passed in earlier.
  • Finally, inside the div, in curly braces, call our variable we passed in the arrow function (mine is called item) and add the text binding to it. This will show our data in text.

--

--

--

An aspiring software developer, hacking enthusiast, and competitive gamer.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Apollo GraphQL Server 🚀 With TypeScript

Laravel & Angular-material: server side pagination (Part 1)

Best React Native Component Libraries To Use In Your Next Project

A Fair Comparison Between ReactJs Vs. React Native

Updated PADD v3.6.1 for Pimoroni HyperPixel 4" display

Fetch, jQuery.ajax, and XMLHttpRequest

Why don’t we use HTML to author web components?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aiden Oliver

Aiden Oliver

An aspiring software developer, hacking enthusiast, and competitive gamer.

More from Medium

What And Why React.js

Let’s get to know React Js