Question

10

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

rated 0 times [ 13] [ 3] / answers: 1 / hits: 20365 / 6 Years ago, fri, july 20, 2018, 12:00:00

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;

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

josefinap

Add To Favorites

Follow

Total Points: 548

Total Questions: 125

Total Answers: 106

Location: Angola

Member since Tue, May 5, 2020

4 Years ago

answered 6 Years ago morrismilom · Accepted Answer

You need to lift your state up in your situation. The second option is what @Gavin Thomas suggested in the comment. But without Redux you can do it like:

const InputArea = (props) => {

  const handleChange = (e) => props.handleInputValue(e.target.value);



  return (

    <div className=column>

      <div className=col-body>

        <textarea

          id=editor

          placeholder=Enter text here

          onChange={handleChange}

        ></textarea>

      </div>

    </div>

  );

};



const DisplayArea = (props) => (

  <div className=column>

    <div className=col-body>

      <div id=preview>{props.inputValue}</div>

    </div>

  </div>

);



class App extends React.Component {

  state = {

    inputValue: Initial Value,

  };



  handleInputValue = (inputValue) => this.setState({ inputValue });



  render() {

    return (

      <div id=wrapper className=App>

        <DisplayArea inputValue={this.state.inputValue} />

        <InputArea handleInputValue={this.handleInputValue} />

      </div>

    );

  }

}



ReactDOM.render(<App />, document.getElementById(app));

<script src=https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js></script>

<script src=https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js></script>

<div id=app></div>

Here, we hold our input value state in the parent component, which is App. We pass a callback function to InputArea and change our parent component's state using this callback function. Then we pass this state to our DisplayArea component.