React Props

In React, props (short for “properties”) are a way to pass data from one component to another. Props are passed down from a parent component to a child component as an attribute and can be used to customize the behavior and appearance of the child component.

Here’s an example of a parent component that passes some props to a child component:

				
					import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  return (
    <div>
      <ChildComponent name="Alice" age={25} />
    </div>
  );
}

export default ParentComponent;

In this example, we’re defining a parent component called ParentComponent that renders a ChildComponent component and passes two props to it: name and age. The name prop is a string and the age prop is a number.

Here’s an example of a child component that uses props to render some content:

				
					import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
    </div>
  );
}

export default ChildComponent;

In this example, we’re defining a child component called ChildComponent that takes in a props object and uses it to render some content. The name and age props are accessed using dot notation (props.name and props.age) and are used to render the content of two <p> tags.

Overall, props are a powerful feature of React that allow you to pass data between components and create dynamic and reusable user interfaces. By passing props down from a parent component to a child component, you can customize the behavior and appearance of the child component and create complex user interfaces that are easy to maintain and update.

Join To Get Our Newsletter

React Props

You can be your own Guiding star with our help

Sign up and receive the latest tips via email.