This coding test is designed to assess a candidate's knowledge of coding in React . The questions will range from basic coding syntax to more advanced React concepts. The test will also include questions related to debugging and problem-solving.Start Today
In this coding exercise, you are tasked with creating a React component that allows users to create and manage a to-do list. The component should also use local storage to persist the to-do list data between page reloads.
Create an input field inside the component that allows users to enter a to-do item.
Implement the following functionality:
- When the user enters a to-do item and clicks an "Add" button with the class "add," the item should be added to the to-do list.
- The to-do list should be displayed as an ordered (or unordered) list.
- Each to-do item should have a "Delete" button with the class "delete" and an ID based on the to-do text (replace spaces with underscores and convert to lowercase), e.g., if the task is "Buy groceries," the ID of the related delete button should be "delete_buy_groceries," that allows the user to remove the item from the list.
Use local storage to persist the to-do list data:
- When the component mounts (i.e., on the initial page load), check for any saved to-do items in local storage.
- If there are, load the to-do items from local storage and display them in the list.
- When new items are added or items are deleted, update the local storage accordingly to maintain the state between page reloads.
Include error handling for cases where local storage is unavailable or when there are issues with saving or retrieving data.
- Ensure that your component correctly handles adding, deleting, and persisting to-do list items in local storage as specified.
- Test your component thoroughly before submission to avoid common issues.
localStorage for local storage operations.
- Customize the design and styling of the to-do list input, list items, and controls as you see fit.