Feature Search State
Nobody has claimed this yet.
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 65/100
- Issue type
- Feature
- Clarity
- Clearly specified
- Activity status
- Stale
- Tech stack
- javascript, react
- Domain
- frontend
Research direction
Open src/Search.js and inspect the customer name input and its surrounding component. Add the requested searchInput state and input handler, then verify that typing updates the field and logs the entered value with console.log().
Written by the indexing model from the issue text.
Description
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 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
- Dominant language
- JavaScript
- Stars
- 1
- Forks
- 28
- PR merge metrics
- No merged PRs in 30d
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from CodeYourFuture/React-Module-Project
-
♟️ Dependent ticket 🏕 Priority Mandatory 🐇 Size Small 📅 Week 3 📅 Week 4
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
-
🏕 Priority Mandatory 🐂 Size Medium 📅 Week 4 🧩 Feature
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
-
Feature Active Row Open🏝️ Priority Stretch 🐂 Size Medium 📅 Week 2 🧩 Feature
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
-
🏕 Priority Mandatory 🐇 Size Small 📅 Week 2 🧩 Feature
Difficulty 1/5 Under an hour Newbie friendliness 68/100
-
♟️ Dependent ticket 🏕 Priority Mandatory 🦔 Size Tiny
Difficulty 2/5 1-3 hours Newbie friendliness 62/100
All issues in CodeYourFuture/React-Module-Project
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
palladius/rails8-app-on-gcp#145 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
dotenvx/dotenv-vscode#139 ·
-
test-change-proposal
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
web-platform-tests/interop#1455 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
corsairdev/corsair#1764 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100