You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Implement the functionality to search for a customer name given the text typed into the customer name field.
In the src/Search.js file, declare a new state variable named searchInput with the corresponding setter function setSearchInput (hint: use the React function useState). The initial value of the searchInput variable can be an empty string. Add a value property to the <input> tag that is set to the new searchInput state variable.
Create a new function handleSearchInput taking an event parameter. This function should use the setSearchInput function to update the state variable searchInput with what the user typed in the input field. Finally, add a onChange prop to the <input> tag that is set to the function handleSearchInput. Use console.log() to output the value received in the handleSearchInput function.
Hint: Use event.target.value to get the input value.
Test:
Given a searchInput
When I type in the field
Then the value is logged
The text was updated successfully, but these errors were encountered:
Storing the search input in a state
Instructions:
Implement the functionality to search for a customer name given the text typed into the customer name field.
In the
src/Search.js
file, declare a new state variable namedsearchInput
with the corresponding setter functionsetSearchInput
(hint: use the React functionuseState
). The initial value of thesearchInput
variable can be an empty string. Add avalue
property to the<input>
tag that is set to the newsearchInput
state variable.Create a new function
handleSearchInput
taking anevent
parameter. This function should use thesetSearchInput
function to update the state variablesearchInput
with what the user typed in the input field. Finally, add aonChange
prop to the<input>
tag that is set to the functionhandleSearchInput
. Useconsole.log()
to output the value received in thehandleSearchInput
function.Hint: Use
event.target.value
to get the input value.Test:
The text was updated successfully, but these errors were encountered: