State From Parent To Child Class & Child Function in react js

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

import React, { Component } from "react";

class StateFromParentToChild extends Component {

constructor() {

super();

this.state = {

name: "Adi"

};

}

render() {

return (

<div>

State From Parent To Child Class & Child Function

<div>Parent Class</div>

<JTP name={this.state.name} />

<PopsInFunEXP1 name={this.state.name} />

</div>

);

}

}

class JTP extends Component {

render() {

return (

<div>

<div>Child Class</div>

<div>Welcome to {this.props.name}</div>

</div>

);

}

}

function PopsInFunEXP1(props) {

return (

<div>

<div>Child Funtion</div>

<div>{props.name}</div>

</div>

);

}

export default StateFromParentToChild;

• Open App.js file and update code as below\

import React from "react";

import ReactDOM from "react-dom";

import StateFromParentToChild from "./components/StateFromParentToChild";

function App() {

return (

<div className="App">

<StateFromParentToChild />

</div>

);

}

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

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

Output: