Props in functional component react

• Create Components folder under src folder
• Add PopsInFunEXP1.js file and add below Code

import React from "react";

function PopsInFunEXP1(props) {

return (

<div>

Pops In Fun EXP1

<p>{props.Name}</p>

<p>{props.Id}</p>

</div>

);

}

export default PopsInFunEXP1;

PopsInFunEXP1.defaultProps = { Name: "JC" };

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import PopsInFunEXP1 from "./component/PopsInFunEXP1";

import "./styles.css";

function App() {

return (

<div className="App">

<PopsInFunEXP1 Name="adi" Id="100" />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output: