props children example in react

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

import React from 'react';

const person =(props)=>{

    return(

        <div>

        <p>I'm a {props.name} and i am {props.age} years old!</p>

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

        </div>

    );

}

export default person;

• Open App.js file and update code as below

import React from 'react';

import './App.css';

import Person from './Person/Person';

function App() {

  return (

    <div className="App">

      <Person name="adi" age="29"/>

      <h1>Props children Example</h1>

      <Person name="pavan" age="27"><b>My Hobbies: Farming</b></Person>

      <Person name="nani" age="30"/>

    </div>

  );

}

export default App;

Output:

Default props in class component react

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

import React, { Component } from "react";

class PropsDefaultEXP1 extends Component {

render() {

return (

<div>

Default Pops In Class EXP1

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

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

</div>

);

}

}

PropsDefaultEXP1.defaultProps = {

Name: "Adi",

Id: 101

};

export default PropsDefaultEXP1;

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import PropsDefaultEXP1 from "./component/PropsDefaultEXP1";

import "./styles.css";

function App() {

return (

<div className="App">

<PropsDefaultEXP1 />

</div>

);

}

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

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

Output:

Default props in functional component react

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

import React from "react";

function PopsDefaultInFunEXP1(props) {

return (

<div>

Default Pops In Fun EXP1

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

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

</div>

);

}

export default PopsDefaultInFunEXP1;

PopsDefaultInFunEXP1.defaultProps = { Name: "JC", Id: 101 };

• Open index.js file and update code as below

import React from "react";

import "./styles.css";

import PopsDefaultInFunEXP1 from "./Components/PopsDefaultInFunEXP1";

export default function App() {

return (

<div className="App">

<PopsDefaultInFunEXP1 />

</div>

);

}

Output:

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:

Props in class component react

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

import React, { Component } from "react";

class PopsExp1 extends Component {

render() {

return (

<div>

Pops Exp1

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

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

</div>

);

}

}

export default PopsExp1;

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import PopsExp1 from "./component/PopsExp1";

import "./styles.css";

function App() {

return (

<div className="App">

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

</div>

);

}

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

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

Output: