Project: Task Tracker Setup

Let's think about this for a second

In this mini project series, we'll build a Task Tracker app step by step. In Part 1, we'll split the app's skeleton structure into components and practice how data flows from parent to child via props. A TaskTracker (parent) component will hold the task list state, while a TaskItem (child) component will render each individual task in the UI. At this stage we won't add real features (add/delete) yet — we'll just focus on building the layout with static sample data. Getting the component boundaries right now will make it much easier to add features in later parts.

Let's build it for real

Create two files in src/components/: TaskTracker.jsx and TaskItem.jsx. In TaskTracker, prepare a sample task array with useState (a list of objects with id, text, and done fields). Use .map() to render the task list as individual TaskItem components — don't forget to pass task.id as the key prop. TaskItem should accept the task text and done status as props, and show strikethrough styling when done is true (use a conditional class name). Import TaskTracker into App.jsx and run the app to check it out.

• Split TaskTracker and TaskItem into separate component files
• Rendered the task array with .map(), including a key prop
• Received the done status via props and applied conditional styling

Code Example

// src/components/TaskItem.jsx
function TaskItem({ text, done }) {
  return (
    <li className={done ? "task-item done" : "task-item"}>
      <span>{text}</span>
      {done && <span className="badge">Done</span>}
    </li>
  );
}

export default TaskItem;

// src/components/TaskTracker.jsx
import { useState } from "react";
import TaskItem from "./TaskItem";

function TaskTracker() {
  const [tasks] = useState([
    { id: 1, text: "Learn React basics", done: true },
    { id: 2, text: "Build Task Tracker project", done: false },
    { id: 3, text: "Add filtering feature", done: false },
  ]);

  return (
    <div className="task-tracker">
      <h2>My Tasks</h2>
      <ul>
        {tasks.map((task) => (
          <TaskItem key={task.id} text={task.text} done={task.done} />
        ))}
      </ul>
    </div>
  );
}

export default TaskTracker;

In the browser, three tasks show up as list items, and the task with done: true will display strikethrough styling along with a Done badge.