Props in React explained with examples

Props in React pass data from one part to another part. They let you build parts that reuse data and logic with ease.

What are Props in React?

Props act as input for React parts. A parent part sends them to a child part. They let you pass text, numbers, or objects from one part to another part.

You pass props inside a tag like this:

<MyComponent name="John" age={25} />

Inside the part, you read props like this:

function MyComponent(props) {
  return <p>{props.name} is {props.age}</p>;
}

Props work as read-only data. A part cannot change its own props. A parent sends them and the child only reads them.

How Props Work in React Components

Props flow from parent to child parts. A parent gives a value, and a child shows that value. This pattern helps you write small parts and reuse them.

You can set a default value when a prop has no value from the parent:

function Welcome(props) {
  return <h1>Hello {props.name}</h1>;
}

Welcome.defaultProps = {
  name: 'Guest'
};

Here is another example that shows you how to pass props to functional components:

function Greet({ name }) {
  return <p>Hello {name}</p>;
}

Pass props to class components:

class Greet extends React.Component {
  render() {
    return <p>Hello {this.props.name}</p>;
  }
}

Prop types and validation:

import PropTypes from 'prop-types';

function Greet({ name }) {
  return <p>Hello {name}</p>;
}

Greet.propTypes = {
  name: PropTypes.string
};

The Difference Between Props and State

Props hold data that a parent gives to a child. A child cannot change them. State holds data inside the part. A part can change its own state.

Here is a table that shows you the key differences:

Use props to send data across parts. Use state to track data inside one part.

Nested Components and Props Flow

A parent part can send props down many levels. Each child passes props to the next child. This flow keeps data in one direction from top to bottom.

For example:

function Child({ text }) {
  return <p>{text}</p>;
}

function Parent() {
  return <Child text="Hello from parent" />;
}

This pattern keeps your app simple and easy to read.

Examples

Passing simple props to a function part:

function User({ name, age }) {
  return <p>{name} is {age} years old</p>;
}

function App() {
  return <User name="Sam" age={30} />;
}

This part shows a user name and age. A parent sends both values. The child shows them without change or logic.

Passing objects as props:

function Profile({ user }) {
  return <h2>{user.name} from {user.city}</h2>;
}

function App() {
  const person = { name: 'Maya', city: 'Riyadh' };
  return <Profile user={person} />;
}

This part shows how to send an object as one prop. The child reads the object fields and shows them.

Default props with class part:

class Welcome extends React.Component {
  render() {
    return <h1>Hello {this.props.name}</h1>;
  }
}

Welcome.defaultProps = {
  name: 'Visitor'
};

Nested props flow:

function Title({ text }) {
  return <h3>{text}</h3>;
}

function Header({ title }) {
  return <Title text={title} />;
}

function App() {
  return <Header title="Welcome to React" />;
}

This part shows props flow from parent to child to another child. Each part reads the prop and passes it to the next.

Wrapping Up

You learned what props are and how they move data in React. Here is a quick recap:

• props pass data from parent to child, state stores data inside a part, and props flow only downward.

FAQs

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

<Welcome name="John" />

function User(props) {
  return <p>User: {props.username}</p>;
}

<User username="Alex" />

function Counter() {
  const [count, setCount] = React.useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

function Button(props) {
  return <button>{props.label}</button>;
}

Button.defaultProps = {
  label: "Click Me"
};

Similar Reads