Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

Lifting State up in ReactJS

  • Difficulty Level : Medium
  • Last Updated : 22 Jan, 2021

Prerequisite: ReactJs, State, Props

Lifting up the State: As we know, every component in React has its own state. Because of this sometimes data can be redundant and inconsistent. So, by Lifting up the state we make the state of the parent component as a single source of truth and pass the data of the parent in its children.

Time to use Lift up the State: If the data in “parent and children components” or in “cousin components” is Not in Sync.

Example 1: If we have 2 components in our App. A -> B where, A is parent of B. keeping the same data in both Component A and B might cause inconsistency of data. 

Example 2: If we have 3 components in our App.



        A
       / \
      B   C

Where A is the parent of B and C. In this case, If there is some Data only in component B but, component C also wants that data. We know Component C cannot access the data because a component can talk only to its parent or child (Not cousins).

Problem: Let’s Implement this with a simple but general example. We are considering the second example.

Complete File Structure:

Approach: To solve this, we will Lift the state of component B and component C to component A. Make A.js as our Main Parent by changing the path of App in the index.js file

Before:

import App from './App';

After:

import App from './A';

Filename- A.js:



Javascript




import React,{ Component }  from 'react';
import B from './B'
import C from './C'
   
class A extends Component {
  
  constructor(props) {
    super(props);
    this.handleTextChange = this.handleTextChange.bind(this);
    this.state = {text: ''};
  }
  
  handleTextChange(newText) {
    this.setState({text: newText});
  }
   
  render() {
    return (
        <React.Fragment>
          <B text={this.state.text} 
             handleTextChange={this.handleTextChange}/>
          <C text={this.state.text} />
        </React.Fragment>
    );
  }
}
  
export default A;

Filename- B.js:

Javascript




import React,{ Component } from 'react';
  
class B extends Component {
  
constructor(props) {
    super(props);
    this.handleTextChange = this.handleTextChange.bind(this);
}
  
handleTextChange(e){
    this.props.handleTextChange(e.target.value);
}
  
render() {
    return (
        <input value={this.props.text} 
               onChange={this.handleTextChange} />
    );
}
}
      
export default B;

Filename- C.js:

Javascript




import React,{ Component } from 'react';
  
class C extends Component {
  
render() {
    return (
        <h3>Output: {this.props.text}</h3>
    );
}
}
      
export default C;

Output: Now, component C can Access text in component B through component A.




My Personal Notes arrow_drop_up
Recommended Articles
Page :