Props

What Are Props?

So you want to learn React? Props are one of the first things you need to understand. Think of props like arguments you pass to a function. When you call a function with arguments, those values help the function do its job. That's exactly how props work in React — they let you pass data from a parent component to a child component.

Props are short for "properties." They're how components talk to each other. Without props, every component would be an island — isolated and disconnected. Props create the data flow that makes your UI dynamic and interactive.

Passing Data to Components

Let's say you have a component that displays a user's name. You don't want to hardcode the name inside the component. Instead, you pass it in as a prop. The parent component decides what data to send, and the child component receives it and uses it.

Here's the thing — props are read-only. The child component can't change them. It's like receiving a gift. You can use the gift, you can look at it, but you can't go back and change what was given to you. This is a core rule in React.

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

function App() {
  return <Greeting name="Bilal" />;
}

Default Props and Destructuring

Sometimes you want a prop to have a fallback value in case it's not provided. You can set default props using destructuring. If the parent doesn't pass a value, your component still works — it just uses the default.

Destructuring props is the clean way to access them. Instead of writing props.name, you pull out the values you need directly in the function parameters. It's cleaner, easier to read, and less error-prone.

function UserCard({ name = "Guest", age = 0, role = "user" }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <p>Role: {role}</p>
    </div>
  );
}

function App() {
  return <UserCard name="Bilal" age={25} />;
}