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;