Properties (Props)

What are Props?

Props (properties) are how React sends data from a parent component to a child component. Props are read-only — a child component must not modify the props it receives.

Passing Data to a Child

function App() {
  return (
    <ProfileCard
      name="John Smith"
      photo="https://example.com/john.jpg"
      description="Frontend Developer"
    />
  );
}

function ProfileCard({ name, photo, description }) {
  return (
    <div className="profile">
      <img src={photo} alt={name} />
      <h2>{name}</h2>
      <p>{description}</p>
    </div>
  );
}

Destructuring Props

Destructuring makes it easy to access props without writing props. over and over.

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

// With destructuring in the parameter
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// Destructuring inside the function
function Greeting(props) {
  const { name } = props;
  return <h1>Hello, {name}!</h1>;
}

Default Props

You can provide a default value in case a prop is not sent.

function Button({ label = "Click", color = "blue" }) {
  return (
    <button style={{ backgroundColor: color }}>
      {label}
    </button>
  );
}

// Used
<Button />                        // label="Click", color="blue"
<Button label="Submit" />         // label="Submit", color="blue"
<Button label="Delete" color="red" /> // label="Delete", color="red"

Props: Children

The children prop receives the elements between the opening and closing tags.

function Layout({ children }) {
  return (
    <div className="layout">
      <header>Header</header>
      <main>{children}</main>
      <footer>Footer</footer>
    </div>
  );
}

function App() {
  return (
    <Layout>
      <h1>Main Content</h1>
      <p>This is the page content.</p>
    </Layout>
  );
}

Props Validation with PropTypes

PropTypes help validate the data type of props at runtime.

import PropTypes from 'prop-types';

function ProfileCard({ name, age, active }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <p>Status: {active ? "Active" : "Inactive"}</p>
    </div>
  );
}

ProfileCard.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number,
  active: PropTypes.bool,
};

ProfileCard.defaultProps = {
  age: 0,
  active: false,
};

Complete Example: ProfileCard

function ProfileCard({ name, photo, description }) {
  return (
    <div className="profile-card">
      <img src={photo} alt={name} className="avatar" />
      <h3>{name}</h3>
      <p>{description}</p>
    </div>
  );
}

function App() {
  const profile = {
    name: "John Doe",
    photo: "https://example.com/john-doe.jpg",
    description: "UI/UX Designer passionate about design systems.",
  };

  return (
    <div>
      <ProfileCard {...profile} />
    </div>
  );
}

Summary

Props are React's fundamental mechanism for flowing data from parent to child. Use destructuring, default values, and PropTypes for clean and safe code.

The next chapter covers State — how to manage data that changes inside a component.