Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import React from "react";
import { render } from "react-dom";
const ParentComponent = React.createClass({
getDefaultProps: function() {
console.log("ParentComponent - getDefaultProps");
},
getInitialState: function() {
console.log("ParentComponent - getInitialState");
return { text: "" };
},
componentWillMount: function() {
console.log("ParentComponent - componentWillMount");
},
render: function() {
console.log("ParentComponent - render");
return (
<div className="container">
<input
value={this.state.text}
onChange={this.onInputChange} />
<ChildComponent text={this.state.text} />
</div>
);
},
componentDidMount: function() {
console.log("ParentComponent - componentDidMount");
},
componentWillUnmount: function() {
console.log("ParentComponent - componentWillUnmount");
},
onInputChange: function(e) {
this.setState({ text: e.target.value });
}
});
const ChildComponent = React.createClass({
getDefaultProps: function() {
console.log("ChildComponent - getDefaultProps");
},
getInitialState: function() {
console.log("ChildComponent - getInitialState");
return { dummy: "" };
},
componentWillMount: function() {
console.log("ChildComponent - componentWillMount");
},
componentDidMount: function() {
console.log("ChildComponent - componentDidMount");
},
componentWillUnmount: function() {
console.log("ChildComponent - componentWillUnmount");
},
componentWillReceiveProps: function(nextProps) {
console.log("ChildComponent - componentWillReceiveProps");
console.log(nextProps);
},
shouldComponentUpdate: function(nextProps, nextState) {
console.log("ChildComponent - shouldComponentUpdate");
return true;
},
componentWillUpdate: function(nextProps, nextState) {
console.log("ChildComponent - componentWillUpdate");
console.log("nextProps:");
console.log(nextProps);
console.log("nextState:");
console.log(nextState);
},
render: function() {
console.log("ChildComponent - render");
return (
<div>Props: {this.props.text}</div>
);
},
componentDidUpdate: function(previousProps, previousState) {
console.log("ChildComponent - componentDidUpdate");
console.log("previousProps:");
console.log(previousProps);
console.log("previousState:");
console.log(previousState);
}
});
render(
<ParentComponent />,
document.getElementById("root")
);
@kutsan

This comment has been minimized.

Copy link

kutsan commented Nov 15, 2016

Thanks!

@Blainegunn

This comment has been minimized.

Copy link

Blainegunn commented Nov 22, 2016

thanks

@amiteshrai

This comment has been minimized.

Copy link

amiteshrai commented Nov 22, 2016

Brilliant.. Thanks

@dailepro

This comment has been minimized.

Copy link

dailepro commented Nov 29, 2016

Thanks 👍

@ion99

This comment has been minimized.

Copy link

ion99 commented Dec 29, 2016

Awesome! Thank you!

@jiji262

This comment has been minimized.

Copy link

jiji262 commented Feb 13, 2017

http://www.webpackbin.com/VyazWd9Oz

A webpackbin copy which you can try online.

@kainio

This comment has been minimized.

Copy link

kainio commented Feb 20, 2017

Thanks @jiji262

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.