How to update the state of a sibling component from another sibling or imported component in REACT

How to update the state of a sibling component from another sibling or imported component in REACT
0

#1

Hi i just recently started learning ReactJS and been playing around the import and export functions, For example this is the structure of the app, 3 separate files the parent and 2 children; How do i export the state from InputArea to DisplayArea?

Parent Component

import React, { Component } from 'react';
import DisplayArea from './DisplayArea';
import InputArea from './InputArea';

class App extends Component {
  render() {
    return (
      <div id="wrapper" className="App">
        <DisplayArea />
        <InputArea />
      </div>
    );
  }
}

export default App;

Child 1 Component

import React, { Component } from 'react';
import InputArea from './InputArea';

class DisplayArea extends Component {
  constructor(props){
    super(props);
  }
  
    render() {
      return (
        <div className="column">
            <div className="col-body">
                <div id="preview">{ How to display contents here? }</div>
            </div>
        </div>
      );
    }
  }

export default DisplayArea;  

Child 2 Component

import React, { Component } from 'react';

class InputArea extends Component {
    constructor(props){
      super(props);
      this.state = {
        content: ''
      }
      this.handleChange = this.handleChange.bind(this);
    }

    handleChange(e){
      e.preventDefault();
      this.setState({
        content: e.target.value
      })
    }

    render() {
      return (
        <div className="column">
          
            <div className="col-body">
                <textarea id="editor" placeholder="Enter text here" onChange={this.handleChange}></textarea>
            </div>
        </div>
      );
    }
  }

export default InputArea;

#2

Hello! This is a very common situation in React. Whenever you have sibling components that need to share state, you should move the state up to the parent component and then pass the state down as props. If you pass a function from the parent to the child as a prop, you can modify state in the parent component from a child component by calling that function in the child component.


#3

Hey thanks man, ok so the App component should have the initial state? what about the toggle function from the InputArea should i move it to the App component too?


#4

Sure! Yes, exactly. The toggle function should move to the App component as well so that it is able to modify the state in the App component. Then you can pass the toggle function to your InputArea component as a prop and use that as the onChange function.


#5

Oh i see, thanks man. But with redux it’s different right?


#6

Yes, that’s true. If you were using redux you could dispatch an action from InputArea to update the redux store every time you type something. Then you could have DisplayArea subscribe to the store and receive that data as a prop every time the text changes. You wouldn’t necessarily need a local state at all.