React Props

In React, props (short for properties) are the way to pass data from a parent component to a child component.

Props make components dynamic, reusable, and modular, allowing you to build interactive and maintainable UIs.

What Are Props?

Props are read-only inputs for a component.
They allow a parent component to send data or functions to a child component.
A child component cannot modify props — it can only use them.

Analogy: Think of props like function arguments. You pass them to a component, and the component uses them to render something.

Using Props in Functional Components

Example – Passing Data:

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

function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
}

Destructuring Props (Cleaner Syntax):

Using destructuring avoids repeatedly writing props. inside the component.

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

Props in Class Components

In class components, props are accessed using this.props.

Example – Class Component Props:

class Greeting extends React.Component {
  render() {
    return <h2>Hello, {this.props.name}!</h2>;
  }
}

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

Passing Multiple Props

You can pass multiple props to a component:

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

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

Passing Functions as Props

Props can also pass functions, allowing child components to communicate with parent components.

function Button({ handleClick }) {
  return <button onClick={handleClick}>Click Me</button>;
}

function App() {
  const sayHello = () => alert("Hello from App!");
  return <Button handleClick={sayHello} />;
}

Default Props

You can set default values for props if the parent doesn’t provide them.

Functional Component Default Props:

function Greeting({ name = "Guest" }) {
  return <h2>Hello, {name}!</h2>;
}

Class Component Default Props:

class Greeting extends React.Component {
  static defaultProps = {
    name: "Guest",
  };

  render() {
    return <h2>Hello, {this.props.name}!</h2>;
  }
}

Children Props

React provides a special prop called children, allowing you to pass nested content to a component.

Anything between <Card>...</Card> is passed as children.
This makes components flexible and reusable.

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

function App() {
  return (
    <Card>
      <h2>Title</h2>
      <p>This is some content inside the card.</p>
    </Card>
  );
}

Combining Multiple Props and Children

function UserCard({ name, age, profession, children }) {
  return (
    <div className="user-card">
      <h3>{name}</h3>
      <p>Age: {age}</p>
      <p>Profession: {profession}</p>
      <div>{children}</div>
    </div>
  );
}

function App() {
  return (
    <UserCard name="Alice" age={25} profession="Developer">
      <p>Location: New York</p>
    </UserCard>
  );
}

Prop Types (Optional but Recommended)

For better code quality, you can validate props using the prop-types library:

import PropTypes from "prop-types";

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

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};