ReactLifeCycle.js

import React, { Component } from 'react';
import FirstName from './FirstName'
import LastName from './LastName'


class NameForm extends Component {

  constructor (props) {
    super(props)
    this.state = {showFirstName: false, showLastName: false}
  }

  isVisible = (event) => {
    let stateKeyToChange = event.target.dataset['type'] === 'first' ? 'showFirstName' : 'showLastName'

    this.setState({
      [stateKeyToChange] : !this.state[stateKeyToChange]
    })
  }

  render() {
    return <div>
      FirstName: <input type="checkbox" name="firstName" onChange={this.isVisible} data-type="first"/> <br />
      LastName: <input type="checkbox" name="lastName" onChange={this.isVisible}  data-type="last"/> <br />
      { this.state.showFirstName && <FirstName /> } <br />
      { this.state.showLastName && <LastName /> }
    </div>
  }
}

export default NameForm;
------------------------------------------
import React, { Component } from 'react';

class LastName extends Component {

  componentWillReceiveProps (props) {
    console.log('lastName receiving props, (new props --> old props)', props, this.props)
  }

  componentWillUnmount () {
    console.log('lastName unmounting')
  }


  render() {
    return <input type="text" name="lastName" placeholder="lastName"/>
  }
}

export default LastName;
---------------------------------------
  
import React, { Component } from 'react';

class FirstName extends Component {

  componentWillReceiveProps (props) {
    console.log('firstName receiving props, (new props --> old props)', props, this.props)
  }

  componentWillUnmount () {
    console.log('firstName unmounting')
  }


  render() {
    return <input type="text" name="firstName" placeholder="firstName"/>
  }
}

export default FirstName;