thisissami thisissami - 11 days ago 7
Javascript Question

How can a parent alter props for a child component in react?

I'm new to react, and am a little confused about something. I've read many articles online claiming that a component cannot alter its own props, but that a parent can alter the props of its children. However, I have seen nothing that actually shows how to do this.

I would like to be able to do this:

class Parent extends Component {
constructor(props) {
super(props);
this.childProps = {name:'name',age:12,type:'child'};
this.changeChild = this.changeChild.bind(this);
}

changeChildName(newName) {
//change prop 'name' of child here;
}

render() {
return (
<Child {...this.childProps} />
);
}
}


However, I can't figure out how to do this at all - despite almost all the material that I've read on React saying that a parent can change its child's props. What I can get to work properly is as follows:

class Parent extends Component {
constructor(props) {
super(props);
this.state = {name:'name',age:12,type:'child'};
this.changeChild = this.changeChild.bind(this);
}

changeChildName(newName) {
this.setState({name: newName});
}

render() {
return (
<Child {...this.state} />
);
}
}


It seems a bit overkill to me that the Parent needs to re-render when the only thing that I want to re-render is the child view. How can I change the props of the
<Child>
component from the
<Parent>
component?

Secondary Questions

1) Is it possible to change the state of a component without having the component re-render?

2) Is there an
onStateChange
type event that we can tap into, or do we solely have
componentWillReceiveProps
?

Answer

1) Is it possible to change the state of a component without having the component re-render?

No, and it makes very little sense.

2) Is there an onStateChange type event that we can tap into, or do we solely have componentWillReceiveProps?

There is no, use componentWillReceiveProps.

It seems a bit overkill to me that the Parent needs to re-render when the only thing that I want to re-render is the child view.

Actually this is where you trick yourself: the parent IS changed, since what it returns is changed. The whole tree is being re-rendered from the root.

Comments