Course Content
React Mastery
React Mastery
Challenge: Build a Controlled Form Component
Task
In this challenge, you will create a Form
component with two input fields: email
and password
. The goal is to use the useRef
hook to reference the input elements and handle form submission logic.
Instructions
Import the
useRef
hook from thereact
library.Inside the
Form
component, declare twouseRef
variables:emailRef
andpasswordRef
, initialized withnull
.Reset the input fields by setting their values to an empty string using the
useRef
variables.
To import the necessary hook from the React library, include anΒ
import
Β statement.For this task, we will utilize theΒ
useRef
Β hook to store data without affecting the markup.To determine the appropriate variable name for the ref, choose a word that is associated with the ref and add "Ref" at the end.
To initialize the ref withΒ
null
, passΒnull
Β as the initial value in the brackets of theΒuseRef
Β hook (e.g.,ΒuseRef(null)
).To reset the form input, use the appropriate ref variable and assign itsΒ
.current.value
Β to an empty string (""
).
Thanks for your feedback!