JSX: умовний рендеринг та списки

function SaveButton({ isSaving }) {
  return (
    <button type="button" disabled={isSaving}>
      {isSaving ? "Збереження..." : "Зберегти"}
    </button>
  );
}

умова ? значенняЯкщоТак : значенняЯкщоНі

function AuthPanel({ isLoggedIn }) {
  return (
    <section>
      {isLoggedIn ? (
        <button type="button">Вийти</button>
      ) : (
        <button type="button">Увійти</button>
      )}
    </section>
  );
}

function Notifications({ count }) {
  return (
    <header>
      <h1>Панель керування</h1>

      {count > 0 && <span>Нових сповіщень: {count}</span>}
    </header>
  );
}

function ItemCount({ count }) {
  return <p>{count && "Є елементи"}</p>;
}

function ItemCount({ count }) {
  return <p>{count > 0 && "Є елементи"}</p>;
}

function ErrorMessage({ error }) {
  if (!error) {
    return null;
  }

  return <p role="alert">{error}</p>;
}

function ProductList({ products }) {
  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>
          {product.name}: {product.price} грн
        </li>
      ))}
    </ul>
  );
}

{
  id: 1,
  name: "Клавіатура",
  price: 2400
}

function TaskList({ tasks }) {
  if (tasks.length === 0) {
    return <p>Завдань немає.</p>;
  }

  return (
    <ul>
      {tasks.map((task) => (
        <li key={task.id}>{task.title}</li>
      ))}
    </ul>
  );
}

function TaskList({ tasks }) {
  return (
    <section>
      {tasks.length > 0 ? (
        <ul>
          {tasks.map((task) => (
            <li key={task.id}>{task.title}</li>
          ))}
        </ul>
      ) : (
        <p>Завдань немає.</p>
      )}
    </section>
  );
}

function Users({ users }) {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

function Task({ task }) {
  return <li>{task.title}</li>;
}

function TaskList({ tasks }) {
  return (
    <ul>
      {tasks.map((task) => (
        <Task key={task.id} task={task} />
      ))}
    </ul>
  );
}

function Task({ task, taskId }) {
  return <li data-task-id={taskId}>{task.title}</li>;
}

function TaskList({ tasks }) {
  return (
    <ul>
      {tasks.map((task) => (
        <Task key={task.id} task={task} taskId={task.id} />
      ))}
    </ul>
  );
}

<li key={task.id}>{task.title}</li>

// Погано: значення змінюється під час кожного рендеру
<li key={Math.random()}>{task.title}</li>

function Colors({ colors }) {
  return (
    <ul>
      {colors.map((color, index) => (
        <li key={index}>{color}</li>
      ))}
    </ul>
  );
}

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";

const tasks = [
  {
    id: 101,
    title: "Підготувати макет сторінки",
    completed: true,
  },
  {
    id: 102,
    title: "Реалізувати список завдань",
    completed: false,
  },
  {
    id: 103,
    title: "Додати перевірку форми",
    completed: false,
  },
];

function TaskList({ items }) {
  if (items.length === 0) {
    return <p>Список завдань порожній.</p>;
  }

  return (
    <ul>
      {items.map((task) => (
        <li
          key={task.id}
          className={task.completed ? "task task--completed" : "task"}
        >
          <span>{task.title}</span>

          {task.completed && <span>Виконано</span>}
        </li>
      ))}
    </ul>
  );
}

function Dashboard({ isLoading, error, items }) {
  if (isLoading) {
    return <p>Завантаження завдань...</p>;
  }

  if (error) {
    return <p role="alert">Не вдалося завантажити дані: {error}</p>;
  }

  return (
    <main>
      <h1>Мої завдання</h1>

      <p>
        Усього завдань: <strong>{items.length}</strong>
      </p>

      <TaskList items={items} />
    </main>
  );
}

function App() {
  return (
    <Dashboard isLoading={false} error={null} items={tasks} />
  );
}

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <App />
  </StrictMode>
);

<div id="root"></div>

className={task.completed ? "task task--completed" : "task"}

{task.completed && <span>Виконано</span>}

function ActiveTasks({ tasks }) {
  const activeTasks = tasks.filter((task) => !task.completed);

  return (
    <ul>
      {activeTasks.map((task) => (
        <li key={task.id}>{task.title}</li>
      ))}
    </ul>
  );
}

// Погано: React не отримує ключ для кожного елемента
<ul>
  {tasks.map((task) => (
    <li>{task.title}</li>
  ))}
</ul>

<ul>
  {tasks.map((task) => (
    <li key={task.id}>{task.title}</li>
  ))}
</ul>

// Погано: ключ змінюється під час кожного рендеру
{tasks.map((task) => (
  <li key={Math.random()}>{task.title}</li>
))}

{tasks.map((task) => (
  <li key={task.id}>{task.title}</li>
))}

// Якщо count дорівнює 0, у розмітці може з'явитися 0
{count && <p>Є нові елементи</p>}

{count > 0 && <p>Є нові елементи</p>}

return (
  <div>
    {if (isVisible) {
      <p>Текст</p>;
    }}
  </div>
);

return (
  <div>
    {isVisible && <p>Текст</p>}
  </div>
);

function TaskDetails({ tasks }) {
  return (
    <ul>
      {tasks.map((task) => (
        <li key={task.id}>
          <strong>{task.title}</strong>
          <small>{task.completed ? "Готово" : "У роботі"}</small>
        </li>
      ))}
    </ul>
  );
}

function TaskRows({ tasks }) {
  return (
    <>
      {tasks.map((task) => (
        <div key={task.id}>
          <h2>{task.title}</h2>
          <p>{task.completed ? "Виконано" : "Не виконано"}</p>
        </div>
      ))}
    </>
  );
}