AJIT KUMAR PANDIT | BLOG

| Blog

Unlocking the Power of React Props: Sharing Data Between Components Made Simple!

Cover Image for Unlocking the Power of React Props: Sharing Data Between Components Made Simple!

In React, "props," short for "properties," serve as a means to transmit data from a parent component to a child component. You can think of props as variables that allow you to control what a component displays on the screen.

Here's an example that demonstrates how to use props:

1. Define the child component:

import React from 'react';

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

In this example, we've created a "Welcome" component that accepts a prop named "name."

2. Implement the child component in a parent component:

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

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

In this part of the example, we've created a parent component named "App" that renders the "Welcome" component three times, each with different names passed as props. Consequently, the "Welcome" component will display "Hello, Alice!", "Hello, Bob!", and "Hello, Charlie!" on the screen.

Follow Us On :: linktr.ee/ajitkumarpandit