Props in React are used to pass data from a parent component to its child components.
They are like arguments passed to a function
The child component can access the prop values via the props object.

Below is the example where App component passing props as “type=Apple” to Fruit function .

index.js

import React,{Component } from 'react';
import ReactDOM from 'react-dom/client';


// Fruit Component
export default function Fruit(props) {
  return (
    <div>Fruit type is : {props.type}</div>                     // display Apple coming into props
  )
}

//App function component 
function App() {

  return (
    <div>
      <h1>Hello, World!</h1>
      <p>This is a example of props in react.</p>
      <Fruit type= "Apple"/>                                           {/*  Fruit prop */}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));   //creating a root React component in your application

root.render(<App />)                                                 // rendering React components into a DOM node.

import React,{Component } from 'react';

import ReactDOM from 'react-dom/client';

// Fruit Component

export default function Fruit(props) {

return (

<div>Fruit type is : {props.type}</div> // display Apple coming into props

)

}

//App function component

function App() {

return (

<div>

<h1>Hello, World!</h1>

<p>This is a example of props in react.</p>

<Fruit type= "Apple"/> {/* Fruit prop */}

</div>

);

}

const root = ReactDOM.createRoot(document.getElementById("root")); //creating a root React component in your application

root.render(<App />) // rendering React components into a DOM node.

Output:

Hello, World!

This is a example of props in react.

Fruit type is : Apple

React Js Props

Hello, World!

Leave a Comment Cancel Reply