Szep

// 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'));

`// Importujemy niezbędne moduły
import React, { useState } from 'react';
import ReactDOM from 'react-dom';

// 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 (

Lista zadań

type="text"
value={newTask}
onChange={(e) => setNewTask(e.target.value)}
placeholder="Dodaj nowe zadanie"
style={{ padding: '5px', width: '200px', marginRight: '10px' }}
/>

Dodaj

{tasks.map((task, index) => (
• {task} onClick={() => removeTask(index)} style={{ padding: '2px 5px', color: 'white', backgroundColor: 'red', border: 'none', borderRadius: '3px' }} > Usuń
))}

);
}

// Renderowanie aplikacji w DOM
ReactDOM.render(, document.getElementById('root'));
`