Just meet a problem about communication between parent and child component in React.
Child
var Child = React.createClass({
getInitialState() {
return {
childState: this.props.state,
};
},
changeState(e) {
this.setState({e.target.id});
},
render: function () {
return (
<button id='1' onClick={this.changeState}>1</button>
<button id='2' onClick={this.changeState}>2</button>
);
},
});
Parent
var Parent = React.createClass({
getInitialState() {
return {
parentState: '1',
};
},
render: function () {
return (
<Child state=this.state.parentState />
);
},
});
So right now Parent will pass the initial state '1' to child, I want the child component can change both child and parent's state. For example, when click the second button, both child and parent state are set to '2'. How can I achieve this? Thank guys!
to achieve this behaviour you need to communicate with your parent component through props.
var Child = React.createClass({
render: function () {
return (
<button id='1' onClick={this.props.changeState}>1</button>
<button id='2' onClick={this.props.changeState}>2</button>
);
},
});
var Parent = React.createClass({
getInitialState() {
return {
parentState: '1',
};
},
changeState: function(){
this.setState({parentState: e.target.id});
},
render: function () {
return (
<Child changeState={this.changeState} state={this.state.parentState} />
);
},
});
The idea behind this is, that you are passing down the changeState function from your parent Component to your child Component as a function and make it accessible through props. That way when you call the prop function in your child Component - the function in the parent Component will get executed.
That way you also don't need to keep a second "separate" state in your child component because the state of the parent component will be available in both and have the same value in both.
Pardon me for any typing mistakes - I am at the office but since you had no answer yet I wanted to help.
Related
I am unable to use something like this.refs.child.state in my application to access state of a child component, hence need an alternative way to do so. Main reason for this is to pass child contents to redux state when a certain button is clicked inside such childs parent component, hence function in parent component needs to pass childs content as one of the parameters.
Depending on the structure of your components (hard to tell when you don't post code), you could fix this just by chaining callbacks via props. I.e.
var Parent = React.createClass({
onChange: function(childValue){
this.setState({childValue: childValue});
},
render: function(){
return <Child onChange={this.onChange} />
}
});
var Child = React.createClass({
handleChange: function(event){
this.props.onChange(event.target.value);
},
render: function(){
return <input onChange={this.handleChange}/>
}
});
Add in as many middle-layers as needed of the form;
var MiddleChildA = React.createClass({
render: function(){
return <MiddleChildB onChange={this.props.onChange} />
}
});
I know you can pass down states and props in React from a parent component to a child component, but is there any way to do this the opposite way?
For example:
Given some child component:
var Child = React.createClass({
getInitialState: function(){
return {
data: ''
};
},
componentDidMount: function(){
this.setState({data: 'something'});
},
render: function() {
return (
<div>
...
</div>
);
}
});
and given some parent component:
var Parent = React.createClass({
render: function() {
return (
<div>
<Child />
...
</div>
);
}
});
Is there any way for me to give Parent the value of the state data from Child?
No.
But yes. But really no.
You cannot "pass" anything from a child to a parent in React. However, there are two solutions you can use to simulate such a passing.
1) pass a callback from the parent to the child
var Parent = React.createClass({
getInitialState: function() {
return {
names: []
};
},
addName: function(name) {
this.setState({
names: this.state.names.push(name)
});
},
render: function() {
return (
<Child
addName={this.addName}
/>
);
}
});
var Child = React.createClass({
props: {
addName: React.PropTypes.func.isRequired
},
handleAddName: function(event) {
// This is a mock
event.preventDefault();
var name = event.target.value;
this.props.addName(name);
},
render: function() {
return (
...
onClick={this.handleAddName}
...
);
}
});
The second option is to have a top-level state by using a Flux-style action/store system, such as Reflux or Redux. These basically do the same thing as the above, but are more abstract and make doing so on much larger applications very easy.
One way to do this is through a 'render props' pattern I was recently introduced to. Remember, this.props.children is really just a way for React to pass things down to a component.
For your example:
var Parent = React.createClass({
render: function() {
return (
<div>
<Child>
{(childState) => {
// render other 'grandchildren' here
}}
</Child>
</div>
);
}
});
And then in <Child> render method:
var Child = React.createClass({
propTypes: {
children: React.PropTypes.func.isRequired
},
// etc
render () {
return this.props.children(this.state);
}
});
This is probably best suited for cases where the <Child /> is responsible for doing something but doesn't really care much at all about the children that would be rendered in its place. The example the react training guys used was for a component that would fetch from Github APIs, but allow the parent to really control what / if anything was rendered with those results.
Is it possible in react to do something like this:
var App = React.createClass({
getInitialState: function(){
return {
children: [<div/>, <div/>],
comp: ''
};
},
componentWillMount: function(){
this.setState({
comp: <SomeComponent children={this.state.children}/>
});
},
render: function(){
return (
<div>
{this.state.comp === '' ? this.state.children : this.state.comp}
</div>
);
}
});
When I try to do something similar to this I get: Uncaught TypeError: Cannot read property '_currentElement' of null so I assume the answer is no, but I figure there has to be some way considering
<SomeComponent>
<div/>
</SomeComponet>
where <SomeCompent/> renders a <div/>, is valid. However in this particular case I get the same error doing that, but if you look at something like React-Bootstrap https://react-bootstrap.github.io/, it has to be possible.
Why do you want to pass html tags as state? I'm not saying is bad, but there's always a better solution to what you asking. Let's say a child component passing a state Boolean true or false to parent component( Flux - Action by child component pass to store, parent components can pick up the state with onChange event). With that you could invoke the parent element to render different view.
_onChange: function() {
this.setState(this._getStateFromStores());
},
render: function() {
var view;
if (this.state.childAction) {
view = <SomethingTrue/> ;
}
if (!this.state.childAction) {
view = <SomethingFalse/> ;
}
return (
<div>
{view}
</div>
);
I have the next component 'Father' that contains a 'Children' component in React js.
var Father = React.createClass({
render: function () {
return (
<div>
<Children/>
</div>
);
},
onUpdate: function(state) {
this.setState(state);
} });
I want to call the onUpdate function on the father from the children BUT without calling the 'Children' method 'componentDidUpdate' because I'm using that method for some other thing that breaks my application.
How can I do that?
Pass it down in properties. If you need to update only specific parts and prevent your children from updating, use the method shouldComponentUpdate
var Father = React.createClass({
render: function () {
return (
<div>
<Children onUpdateCallback={this.onUpdate}/>
</div>
);
},
onUpdate: function(state) {
this.setState(state);
}
});
var Child = React.createClass({
render: function () { ... },
shouldComponentUpdate: function (prevProps, prevState) { ... return false}
});
If your Children can't/shouldn't update while the Parent does, I think you are probably doing something wrong, but good luck.
Is there any way passing state from parent component to child component like:
var ParentComponent = React.createClass({
getInitialState: function() {
return {
minPrice: 0
}
},
render: function() {
return (
<div onClick={this.doSomething.bind(this, 5)}></div>
);
}
});
var ChildComponent = React.createClass({
getInitialState: function() {
return {
minPrice: // Get from parent state
}
},
doSomething: function(v) {
this.setState({minPrice: v});
},
render: function() {
return (
<div></div>
);
}
});
I want to change parent state value from child component. In react.js is it possible or not?
There is but it's not intended to work like that in React.
2-way data binding isn't the way to go in React, excerpt from the docs.
In React, data flows one way: from owner to child.
So what you want to do if you want to manipulate parent state in your child component is passing a listener.
//parent component's render function
return (
<Child listenerFromParent={this.doSomething} />
)
//child component's render function
return (
<div onClick={this.props.listenerFromParent}></div>
)
You can use the limelights solution, ie passing a function from the parent to the child.
Or you can also use projects like React-Cursor which permits to easily manipulate state passed from a parent component in a child.
I have made my home made framework (Atom-React, some details here) that also use cursors (inspired by Om), and you can somehow achieve easily 2-way data binding with cursors permitting to manipulate the state managed by a parent component.
Here's an exemple usage:
<input type="text" valueLink={this.linkCursor(this.props.inputTextCursor)}/>
The inputTextCursor is a cursor passed from a parent to a child component, and thus the child can easily change the data of the parent seemlessly.
I don't know if other cursor-based React wrappers use this kind of trick but the linkCursor function is implemented very easily with a simple mixin:
var ReactLink = require("react/lib/ReactLink");
var WithCursorLinkingMixin = {
linkCursor: function(cursor) {
return new ReactLink(
cursor.getOrElse(""),
function setCursorNewValue(value) {
cursor.set(value);
}
);
}
};
exports.WithCursorLinkingMixin = WithCursorLinkingMixin;
So you can easily port this behavior to React-Cursor