Масиви у State

setItems((previousItems) => [
  ...previousItems,
  newItem,
]);

const addItem = () => {
  const newItem = {
    id: Date.now(),
    title: "Вивчити React",
  };

  setItems((previousItems) => [
    ...previousItems,
    newItem,
  ]);
};

setItems((previousItems) => ...)

setItems((previousItems) => [
  newItem,
  ...previousItems,
]);

const removeItem = (id) => {
  setItems((previousItems) =>
    previousItems.filter((item) => item.id !== id)
  );
};

const numbers = [1, 2, 3];

const filteredNumbers = numbers.filter((number) => number !== 2);

console.log(numbers); // [1, 2, 3]
console.log(filteredNumbers); // [1, 3]

const updateItem = (id, newTitle) => {
  setItems((previousItems) =>
    previousItems.map((item) => {
      if (item.id === id) {
        return {
          ...item,
          title: newTitle,
        };
      }

      return item;
    })
  );
};

const updateItem = (id, newTitle) => {
  setItems((previousItems) =>
    previousItems.map((item) =>
      item.id === id
        ? { ...item, title: newTitle }
        : item
    )
  );
};

import { useState } from "react";

function TodoList() {
  const [todos, setTodos] = useState([
    {
      id: 1,
      title: "Вивчити масиви у state",
      completed: false,
    },
  ]);

  const [newTitle, setNewTitle] = useState("");
  const [editingId, setEditingId] = useState(null);
  const [editingTitle, setEditingTitle] = useState("");

  const addTodo = (event) => {
    event.preventDefault();

    const title = newTitle.trim();

    if (!title) {
      return;
    }

    const newTodo = {
      id: Date.now(),
      title,
      completed: false,
    };

    setTodos((previousTodos) => [
      ...previousTodos,
      newTodo,
    ]);

    setNewTitle("");
  };

  const removeTodo = (id) => {
    setTodos((previousTodos) =>
      previousTodos.filter((todo) => todo.id !== id)
    );
  };

  const toggleTodo = (id) => {
    setTodos((previousTodos) =>
      previousTodos.map((todo) =>
        todo.id === id
          ? { ...todo, completed: !todo.completed }
          : todo
      )
    );
  };

  const startEditing = (todo) => {
    setEditingId(todo.id);
    setEditingTitle(todo.title);
  };

  const saveTodo = (id) => {
    const title = editingTitle.trim();

    if (!title) {
      return;
    }

    setTodos((previousTodos) =>
      previousTodos.map((todo) =>
        todo.id === id
          ? { ...todo, title }
          : todo
      )
    );

    setEditingId(null);
    setEditingTitle("");
  };

  const cancelEditing = () => {
    setEditingId(null);
    setEditingTitle("");
  };

  return (
    <div>
      <h1>Список завдань</h1>

      <form onSubmit={addTodo}>
        <input
          value={newTitle}
          onChange={(event) => setNewTitle(event.target.value)}
          placeholder="Нове завдання"
        />
        <button type="submit">Додати</button>
      </form>

      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            {editingId === todo.id ? (
              <>
                <input
                  value={editingTitle}
                  onChange={(event) =>
                    setEditingTitle(event.target.value)
                  }
                />

                <button onClick={() => saveTodo(todo.id)}>
                  Зберегти
                </button>

                <button onClick={cancelEditing}>
                  Скасувати
                </button>
              </>
            ) : (
              <>
                <label>
                  <input
                    type="checkbox"
                    checked={todo.completed}
                    onChange={() => toggleTodo(todo.id)}
                  />

                  <span
                    style={{
                      textDecoration: todo.completed
                        ? "line-through"
                        : "none",
                    }}
                  >
                    {todo.title}
                  </span>
                </label>

                <button onClick={() => startEditing(todo)}>
                  Редагувати
                </button>

                <button onClick={() => removeTodo(todo.id)}>
                  Видалити
                </button>
              </>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

setTodos((previousTodos) => [
  ...previousTodos,
  newTodo,
]);

setTodos((previousTodos) =>
  previousTodos.filter((todo) => todo.id !== id)
);

setTodos((previousTodos) =>
  previousTodos.map((todo) =>
    todo.id === id
      ? { ...todo, title: newTitle }
      : todo
  )
);

setTodos((previousTodos) =>
  previousTodos.map((todo) =>
    todo.id === id
      ? { ...todo, completed: !todo.completed }
      : todo
  )
);

todos.push(newTodo);
setTodos(todos);

todo.title = "Нова назва";

setTodos((previousTodos) =>
  previousTodos.map((todo) =>
    todo.id === id
      ? { ...todo, title: "Нова назва" }
      : todo
  )
);

items.push(newItem);
setItems(items);

setItems((previousItems) => [
  ...previousItems,
  newItem,
]);

items.splice(index, 1);
setItems(items);

setItems((previousItems) =>
  previousItems.filter((item) => item.id !== itemId)
);

items[0].title = "Нове значення";
setItems([...items]);

setItems((previousItems) =>
  previousItems.map((item) =>
    item.id === itemId
      ? { ...item, title: "Нове значення" }
      : item
  )
);

setItems([...items, newItem]);

setItems((previousItems) => [
  ...previousItems,
  newItem,
]);

{items.map((item) => (
  <li key={item.id}>{item.title}</li>
))}