Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- class OnlyEvens extends React.Component {
- constructor(props) {
- super(props);
- }
- shouldComponentUpdate(nextProps, nextState) {
- console.log('Should I update?');
- // change code below this line
- return (nextProps.value % 2 === 0); // check if valueof next prop is even. If it is, it renders, else it does not render.
- // change code above this line
- }
- componentWillReceiveProps(nextProps) {
- console.log('Receiving new props...');
- }
- componentDidUpdate() {
- console.log('Component re-rendered.');
- }
- render() {
- return <h1>{this.props.value}</h1>
- }
- };
- class Controller extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- value: 0
- };
- this.addValue = this.addValue.bind(this);
- }
- addValue() {
- this.setState({
- value: this.state.value + 1
- });
- }
- render() {
- return (
- <div>
- <button onClick={this.addValue}>Add</button>
- <OnlyEvens value={this.state.value}/>
- </div>
- );
- }
- };
Add Comment
Please, Sign In to add comment