I am learning react.js,
What I am trying to achieve is how to share states between two Components.
I have created 'MainComponent', which renders 'FirstComponent' and 'SecondComponent'.
FirstComponent renders a input text. And SecondComponent renders paragraph diplaying data.
What I need is,
If any data entered in FirstComponent should be rendered in SecondComponent.
My code is as follows,
<!DOCTYPE HTML>
<html>
<head>
<title>React Demo 01</title>
<meta charset="utf-8" /> <!-- This tag is required or else babel gives regex error -->
<script src="../../lib/react.development.js" type="text/javaScript"></script>
<script src="../../lib/react-dom.development.js"></script>
<script src="../../lib/babel.min.js" type="text/javaScript"></script>
</head>
<body>
<h1>React DEMO 01</h1>
<div id="example"></div>
<script type="text/babel">
function Store(){
var intialState = new Object();
this.state = intialState;
}
Store.prototype.mergeState = function(partialState){
Object.assign(this.state,partialState);
}
var myStore = new Store();
class SecondComponent extends React.Component{
constructor(props){
super(props);
}
render(){
return (<div>
<p>{this.props.someThing}</p>
</div>)
}
}
class FirstComponent extends React.Component{
constructor(props){
super(props);
this.handleTxt = this.handleTxt.bind(this);
}
handleTxt(event){
console.log(event.target.value);
this.props.mergeState({
"someThing" : event.target.value
});
}
render(){
return (<div>
<input type="text" onKeyPress={this.handleTxt} />
</div>)
}
}
class MainComponent extends React.Component{
constructor(props){
super(props);
}
render(){
return (
<table>
<tbody>
<tr>
<td><FirstComponent mergeState={myStore.mergeState.bind(myStore)} /></td>
</tr>
<tr>
<td><SecondComponent mergeState={myStore.mergeState.bind(myStore)} /></td>
</tr>
</tbody>
</table>
)
}
}
ReactDOM.render(<MainComponent />,document.getElementById("example"));
</script>
</body>
From the above example you see 'FirstComponent' renders input text, an 'onKeyPress' event is attached which captures the input data and set it in shared state.
class FirstComponent extends React.Component{
constructor(props){
super(props);
this.handleTxt = this.handleTxt.bind(this);
}
handleTxt(event){
console.log(event.target.value);
this.props.mergeState({
"someThing" : event.target.value
});
}
render(){
return (<div>
<input type="text" onKeyPress={this.handleTxt} />
</div>)
}
}
I need my 'SecondComponent' to capture the shared state and display it. The code of 'SecondComponent' is as follows
class SecondComponent extends React.Component{
constructor(props){
super(props);
}
render(){
return (<div>
<p>{this.props.someThing}</p>
</div>)
}
}
How can I achieve this ?
Is my approach wrong ?
I referred Share Components This link for my example.
