Gathering User Input for Task Completion
Learn how to add a form to a React application to gather user input for completing tasks.
We are almost at the completion stage of our application, and it’s time we take a look at how we can use forms in React to complete our application.
Adding a form to our application
At this stage, our product details page just needs an “ADD TO CART” button in order for our React application to be complete. We will, however, also need to know how many switches a user would like to purchase.
Mechanical keyboards come in a variety of sizes, with the most popular being 65%, which has around 70 keys. A ten-keyless keyboard, which does not have the right-most number pad, has around 100 keys, and a full-size keyboard has around 120 keys.
We will take a look at how React handles form input values and form submission, which we will need to gather how many switches a user would like to add to their cart.
We will make updates to our DetailView.tsx file in a few stages.
An interface to hold the number of switches
Firstly, let’s introduce an interface to hold the number of switches a user wishes to purchase as follows:
Get hands-on with 1200+ tech skills courses.