Simple Todo List

This example demonstrates managing a list of tasks using state.

jsxCopy codeimport React, { useState } from 'react';
import ReactDOM from 'react-dom';

function TodoApp() {
  const [tasks, setTasks] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const addTask = () => {
if (inputValue) {
  setTasks([...tasks, inputValue]);
  setInputValue('');
}
  };

  const removeTask = (index) => {
const newTasks = tasks.filter((_, i) => i !== index);
setTasks(newTasks);
  };

  return (
<div>
  <h1>Todo List</h1>
  <input
    type="text"
    value={inputValue}
    onChange={(e) => setInputValue(e.target.value)}
    placeholder="Add a new task"
  />
  <button onClick={addTask}>Add</button>
  <ul>
    {tasks.map((task, index) => (
      <li key={index}>
        {task} <button onClick={() => removeTask(index)}>Remove</button>
      </li>
    ))}
  </ul>
</div>
  );
}

ReactDOM.render(<TodoApp />, document.getElementById('root'));