React.js 将数据从类组件传递到 ReactDOM.render 中的另一个组件

Question

I have this problem where I want to update my component FooBar if Foo's state changes. How can I do it? This doesn't work.

import React from "react"
import ReactDOM from "react-dom"
import FooBar from "./FooBar"

class Foo extends React.Component {
    constructor() {
       super()
       this.state = { data: [] } 
   } 

   changeData() {
       someCode
   }

   render() {
       return (
           some html
       )
   }
}

ReactDom.render(<Foo />, document.getElementById('Something'))
ReactDom.render(<FooBar data={this.state.data}/>, document.getElementById('SomethingElse'))

Answer 1

Question is a bit confusing, You can try this if it works

 changeData = () =>
       this.setState({data:'your changes'})
   }

the above code will update the state, thus rest of component connected with class will render automatic.

Answer 2

Create a parent component, render both foo and foobar inside. now you can use state normally for communication between them and only have to use one ReactDom.Render

class Parent extends React.Component{
   render(){
      return(
        <div>
           <Foo/>
           <Foobar/>
       </div>
      );
   }
}


ReactDom.render(<Parent  />, document.getElementById('Something'))