#100DaysOfCodeChallenge

[Diana_Farhat]

Day 29: Understanding React Props

When I first learned React, props confused me. Everyone kept saying, “Props let you pass data from one component to another,” but that explanation felt too abstract. I needed something more visual—something that clicked.

Then, someone compared it to a manager delivering task notes .

Imagine you’re working in business. You have a manager who hands out notes to different employees, telling them what to do. These employees don’t decide their own tasks—they simply follow the instructions they receive.

In React, props work the same way:

• The parent component (the manager) passes information (props) to the child component (the employee).
• The child component can only read the props—it can’t change them.
• This keeps everything organized and predictable, just like in a well-run business.

Once I saw props this way, everything made sense. Let me show you how this works with a simple To-Do List example.

import React from "react";

// Child component receiving props
const ToDoItem = ({ task, completed }) => {
  return (
    <li>
      {task} - {completed ? "✅ Done" : "⏳ Pending"}
    </li>
  );
};

export default ToDoItem;

This component holds an array of tasks and passes each one to ToDoItem using props.

import React from "react";
import ToDoItem from "./ToDoItem"; // Import the child component

// Parent component passing props
const ToDoList = () => {
  const tasks = [
    { id: 1, task: "Read research paper", completed: true },
    { id: 2, task: "Write summary", completed: false },
  ];

  return (
    <ul>
      {tasks.map((item) => (
        <ToDoItem key={item.id} task={item.task} completed={item.completed} />
      ))}
    </ul>
  );
};

export default ToDoList;

How Props Work in This Example

Think of it this way:

• The ToDoList (manager) writes down all tasks and delivers them to different ToDoItem (employees).
• Each ToDoItem (employee) reads its instructions (props) and follows them exactly.
• The employees cannot change the instructions—they can only display them.

100daysofcode lebanon-mug