Frontend Engineering | VoidX Academy

21. Props (Passing Data)

Making Components Dynamic

A static component like <button>Click Me</button> is okay, but what if you need a button that says "Login" and another that says "Sign Up"? You shouldn't write two separate components. You should write one component and pass different data into it. This data is called Props (Properties).

Passing and Receiving Props

Props look exactly like HTML attributes. When a parent component renders a child, it can pass data down to it. The child receives this data packaged as a single JavaScript object.

// 2. The Child component receives the 'props' object
function Greeting(props) {
  // It accesses the data using dot notation
  return <h1>Hello {props.name}!</h1>;
}

// 1. The Parent component passes data via an attribute named 'name'
function App() {
  return (
    <div>
      <Greeting name="Prince" />
      <Greeting name="Alice" />
    </div>
  );
}

Destructuring Props

Writing props.name and props.age gets repetitive. Modern React developers almost always use JavaScript Object Destructuring right inside the function parameters to extract the data immediately.

// Destructuring { name, role } directly from the incoming props object
function UserCard({ name, role }) {
  return (
    <div className="card">
      <h3>{name}</h3>
      <p>Position: {role}</p>
    </div>
  );
}

function App() {
  return <UserCard name="John Doe" role="CEO" />;
}

The Golden Rule of Props

Props are strictly read-only (immutable). A child component is never allowed to modify the props it receives from its parent. If you try to write props.name = "John" inside the child, React will throw an error. Data flows one way: Top to Bottom.

The `children` Prop

Sometimes you want to pass entire HTML blocks or other components into a custom component (like a Layout or a Modal). You can place content between the opening and closing tags of a component, and React will pass it down as a special prop naturally named children.

function Modal({ children }) {
  return (
    <div className="modal-background">
      <div className="modal-box">
        {/* The dynamic content is injected here */}
        {children}
      </div>
    </div>
  );
}

function App() {
  return (
    <Modal>
      <h2>Warning</h2>
      <p>Are you sure you want to delete this?</p>
    </Modal>
  );
}

Knowledge Check

Ready to test your understanding of 21. Props (Passing Data)?

20. Components

22. State (useState)