Overview
React Hooks: useState - 1
GreatFrontEnd has better questions!
We don't create questions because GreatFrontEnd already has the best possible library of questions and we recommend the same to our community.
Questions are deprecated!
These are the interview practice questions from the legacy versions of Frontend Hire. Only the ones with a video solution are available. Moving forward, we won't be releasing more questions as this is not our strongest content.
Fork on Stackblitz
Click on the "Fork" button on the bottom-left corner of the editor to fork the code on Stackblitz and to solve this question in a separate browser tab.
Question
This question revolves around the most frequently used hook in React development.
Why did the useState hook feel so important? Because every time something changed, it was called upon!
Objective
Your task is to implement the logic for managing tasks – including storing, adding, and deleting them within a local state variable. Focus on functionality, and don't worry about styling, although you're welcome to add some if you wish. TailwindCSS is already set up for your convenience.
Requirements
- Storing Tasks: Implement a state variable to hold the list of tasks.
- Adding Tasks: Write the logic to add new tasks to the state.
- Deleting Tasks: Write the logic to remove tasks based on their id.
Working with Task IDs
In this question, each task will need a unique identifier (ID). For simplicity, you can use Math.random() to generate a pseudo-random ID for new tasks. Here's a quick way to do it:
This will create a string that's reasonably unique for our purposes. However, keep in mind that in real-world applications, more robust methods are recommended for generating unique IDs (see resources).
Bonus Task
- Implement a clear all tasks feature.
Resources to Refer
- State: A Components Memory - A guide to understanding state in React.
- API Reference: useState - Official documentation for the useState hook.
- Rendering Lists: Where to get your key - A guide to understanding keys.
- How to create a unique id in ReactJS ? - An article on GeeksForGeeks.
Promote your product or service here
Get in front of thousands of frontend developers and tech enthusiasts with our advertising slots.
GreatFrontEnd has better questions!
We don't create questions because GreatFrontEnd already has the best possible library of questions and we recommend the same to our community.
Last updated on