We can set Parent State from Children Component in ReactJs using the following approach.
Prerequisite: State introduction in ReactJS
- We will actually set the state of a parent in the parent component itself, but the children will be responsible for setting.
- We will create a function in parent to set the state with the given input.
- We will pass that function in children as a prop.
- Then Children will call the function with a new Value.
- We will set the state of the parent in the function.
Creating React Application:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder, i.e., folder name, move to it using the following command:
cd foldername
Project Structure: It will look like the following.
Step 3: Now create Parent and Children components in the src folder with the following code.
Filename- Child.js:
import React,{ Component } from 'react' ;
class Child extends Component { constructor(props) {
super (props);
this .handleClick.bind( this );
}
handleClick = () => {
// We will start the process of changing
// state of parent from Here...
}
render() {
return (
<button onClick={ this .handleClick}>Reveal Title</button>
);
}
} export default Child;
|
Filename- Parent.js:
import React,{ Component } from 'react' ;
import "./parent_css.css"
// Importing child component for rendering import Child from './child' ;
class Parent extends Component { constructor(props) {
super (props);
this .state = {title: "" };
}
render() {
return (
<React.Fragment>
// Rendering title of state initially empty.
<h1> { this .state.title} </h1>
// Rendering child component here which
// contains only a button
<Child />
</React.Fragment>
);
}
} export default Parent;
|
Step 4: Create function setStateOfParent to set state of Parent in Parent component, also pass setStateOfParent function in children.
Filename- Parent.js:
import React,{ Component } from 'react' ;
import "./parent_css.css"
import Child from './child' ;
class Parent extends Component { constructor(props) {
super (props);
this .setStateOfParent.bind( this );
this .state = {title: "" };
}
// Creating below function to set state
// of this (parent) component.
setStateOfParent = (newTitle) => {
this .setState({title: newTitle});
}
render() {
return (
<React.Fragment>
<h1> { this .state.title} </h1>
// Passing the setStateOfParent function
// in child as a prop
<Child setStateOfParent = { this .setStateOfParent}/>
</React.Fragment>
);
}
} export default Parent;
|
Step 5: Now access and call the setStateOfParent function in children whenever you want to set the state of the parent.
Filename- Child.js:
import React,{ Component } from 'react' ;
class Child extends Component { constructor(props) {
super (props);
this .handleClick.bind( this );
}
handleClick = () => {
// Simply call the setStateOfParent function from
// prop and pass required argument
this .props.setStateOfParent( "Geeks For Geeks" );
}
render() {
return (
<button onClick={ this .handleClick}>Reveal Title</button>
);
}
} export default Child;
|
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output: