Todo List Component

Build a functional todo list component where users can add new tasks and remove existing ones.

Component Requirements

• Create a component that displays a list of todo items
• Include an input field with placeholder="Add your task"
• Add a "Submit" button that adds the task from the input field
• Each task item should have a "Delete" button to remove it
• The input field should clear after a task is added
• Use useState to manage the tasks list and input value

Implementation Notes

• Use the useState hook to manage the list of tasks
• Use a second state for the input field value
• Handle form submission to prevent page refresh
• Focus on functionality rather than styling (styling is provided)
• Your component should be the default export

Styling Information

QuizMaster provides basic styling for common HTML elements. Toggle between 'Styled' and 'Raw' modes in the preview panel to see your component with or without platform styling.

Example Code Structure

<div>
      <h1>Todo List</h1>
      <div className="input-container">
        <input
          type="text"
          placeholder="Add your task"
          value={newTask}
          onChange={(event) => setNewTask(event.target.value)}
        />
        <button onClick={handleAddTask}>Submit</button>
      </div>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>
            {task}
            <button onClick={() => handleDeleteTask(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>