# Introduction to React Props

## Components

### Introduction

In order to truly understand `props` in React, we first need to be clear on what components are. A `component` is a reusable piece of the user interface that encapsulates structure, styling, and behavior.

Instead of repeating the same code across a project, we can build small, independent components and compose them together to form complete pages or applications.

### Jsx

At its core, a component in React is simply a JavaScript function that returns JSX. JSX is a special syntax extension that looks like HTML but runs in JavaScript. It allows us to describe what the UI (User interface) should look like while keeping the full power of JavaScript inside our markup.

It looks like the following

```plaintext
function Greeting() {
  const styles = {
    color: "blue",
    fontSize: "24px",
    fontFamily: "Arial, sans-serif"
  };

  return (
    <div>
      <h1 style={styles}>Hello, World!</h1>
      <p className="subtitle">Welcome to React components with JSX.</p>
    </div>
  );
}
```

---

## Props

### Introduction

In the context of React components, `props` (short for properties) are the way we pass data from a parent component down to a child component.

Think of them like function parameters:

* A `component` receives `props` as an argument.
    
* The `props` define how the component behaves or what it displays.
    
* `Props` are read-only (immutable inside the child), since the child cannot change them, only use them.
    

---

### Code snippet

Let’s explore the following code snippet:

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

// Using the component with different props
function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
}
```

What’s happening up here?

* The `App` component is the **parent**, since it’s the one that render another component inside its JSX. In our previous example, the App `component` uses `<Greeting />` inside its return statement.
    
* It renders `Greeting` twice, passing a different `name` each time.
    
* Inside `Greeting`, we use [`props.name`](http://props.name) to display the correct value.
    
* The result on screen:
    
    ```plaintext
    Hello, Alice!
    Hello, Bob!
    ```
    
    ---
    
    ### Characteristics
    
    #### Read-Only
    
    `Props` are read-only. It means they cannot be modified by the child. If you try, React will warn you.
    

```plaintext
function Greeting(props) {
  // ❌ Avoid doing this!
  // props.name = "Changed"; // Error: props are read-only
  return <h1>Hello, {props.name}!</h1>;
}
```

The read-only characteristic enforces the one-way data flow in React: data flows from parent → child, not the other way around.

Props are meant to be used, not changed.

---

#### Any data type

Props aren’t limited to strings. You can pass numbers, booleans, objects, arrays, and even functions.

In the following code snippet, **App** renders `<Profile user={user}…`, React bundles everything inside an object, it does not matter how many objects or functions are inside.

So, inside \`Profile\`, we can access:

* `props.user` → an **object** (`{ name: "Alice", age: 28 }`)
    
* `props.onLogout` → a **function**
    

```plaintext
function Profile(props) {
  return (
    <div>
      <h2>{props.user.name}</h2>
      <p>Age: {props.user.age}</p>
      <button onClick={props.onLogout}>Logout</button>
    </div>
  );
}

function App() {
  const user = { name: "Alice", age: 28 };

  function handleLogout() {
    alert("Logged out!");
  }

  return <Profile user={user} onLogout={handleLogout} />;
}
```

---

#### Default values

If a parent component does not pass a prop, you can define a default.

```plaintext
function Button({ label = "Click Me" }) {
  return <button>{label}</button>;
}

function App() {
  return (
    <div>
      <Button /> {/* Uses default: "Click Me" */}
      <Button label="Submit" /> {/* Uses passed prop */}
    </div>
  );
}
```

---

#### Spread

In React, you don’t always need to pass `props` one by one. You can use the `spread` operator, which is `…`, to pass all the properties of an object as props to a component.

Take a look at the following code snippet without `spread`

```plaintext
function UserCard({ name, age }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>Age: {age}</p>
    </div>
  );
}

function App() {
  const user = { name: "Alice", age: 28 };

  return <UserCard name={user.name} age={user.age} />;
}
```

Now, the following with `spread`:

```plaintext
function App() {
  const user = { name: "Alice", age: 28 };

  // Spreads `user` into { name: "Alice", age: 28 }
  return <UserCard {...user} />;
}
```

Now, **UserCard** automatically receives `props.name` and `props.age` without you having to type them out one by one.

Keep in mind that spreading blindly can make it harder to know which `props` a component is using. It’s often best for cases like “pass all user data”.

---

#### Children

Every React component automatically has access to a special prop called `children`. It represents the content you place between the opening and closing tags of a component.

```plaintext
function Card(props) {
  return <div className="card">{props.children}</div>;
}

function App() {
  return (
    <Card>
      <h1>Welcome!</h1>
      <p>This text is inside the Card component.</p>
    </Card>
  );
}
```

So, everything between `<Card>` and `</Card>` is passed as props.children.

---

#### Conditional

Since props are just JavaScript values, you can pass conditional expressions.

```plaintext
function Status({ online }) {
  return <p>{online ? "🟢 Online" : "🔴 Offline"}</p>;
}

function App() {
  return (
    <div>
      <Status online={true} />
      <Status online={false} />
    </div>
  );
}
```

---

## Done

---