// Importujemy niezbędne moduły

import React, { useState } from 'react';

import ReactDOM from 'react-dom';

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1opiu828uenilwmo0kru.jpg)



// Komponent główny aplikacji

function TodoApp() {

  // Hook useState do zarządzania listą zadań

  const [tasks, setTasks] = useState([]);

  const [newTask, setNewTask] = useState('');



  // Funkcja dodająca nowe zadanie do listy

  const addTask = () => {

    if (newTask.trim() !== '') {

      setTasks([...tasks, newTask]);a

      setNewTask('');

    }

  };



  // Funkcja usuwająca zadanie z listy

  const removeTask = (index) => {

    const updatedTasks = tasks.filter((_, i) => i !== index);

    setTasks(updatedTasks);

  };



  return (

    <div style={{ padding: '20px', fontFamily: 'Arial' }}>

      <h1>Lista zadań</h1>

      <div>

        <input

          type="text"

          value={newTask}

          onChange={(e) => setNewTask(e.target.value)}

          placeholder="Dodaj nowe zadanie"

          style={{ padding: '5px', width: '200px', marginRight: '10px' }}

        />

        <button onClick={addTask} style={{ padding: '5px 10px' }}>

          Dodaj

        </button>

      </div>

      <ul style={{ marginTop: '20px', paddingLeft: '0', listStyle: 'none' }}>

        {tasks.map((task, index) => (

          <li key={index} style={{ marginBottom: '10px', display: 'flex', alignItems: 'center' }}>

            <span style={{ marginRight: '10px' }}>{task}</span>

            <button

              onClick={() => removeTask(index)}

              style={{ padding: '2px 5px', color: 'white', backgroundColor: 'red', border: 'none', borderRadius: '3px' }}

            >

              Usuń

            </button>

          </li>

        ))}

      </ul>

    </div>

  );

}



// Renderowanie aplikacji w DOM

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