title: getDerivedStateFromProps not working for my application. How can I replace componentWillRecieveProps?
body: <p>I'm creating a React application with Redux, and on my Account Settings page I have a form that I want pre-populated with the user's info and then give them the ability to edit the fields and update their profile. My code is as follows:</p>
  
  <pre><code>class UpdateProfile extends Component {
    constructor(props) {
      super(props);
      this.props.getCurrentProfile();
      this.state = {
        firstName: "",
        lastName: "",
        email: "",
        gender: "",
        bday: "",
        address1: "",
        address2: "",
        zipCode: "",
        phone: "",
        contactMethod: "",
        plan: "",
        apptReminders: true,
        updates: true,
        errors: {}
      };
  
      // Bind functions
      this.onChange = this.onChange.bind(this);
      this.onSubmit = this.onSubmit.bind(this);
    }
  
    // static getDerivedStateFromProps(nextProps) {
    //   if (nextProps.profile) {
    //     let personal = nextProps.profile.profile.personalInfo;
    //     let account = nextProps.profile.profile.accountInfo;
    //     return {
    //       firstName: personal.firstName,
    //       lastName: personal.lastName,
    //       email: personal.email,
    //       address1: personal.address1,
    //       address2: personal.address2,
    //       zipCode: personal.zipCode,
    //       phone: personal.phone,
    //       contactMethod: account.contactMethod,
    //       plan: account.plan,
    //       apptReminders: account.alerts.apptReminders,
    //       updates: account.alerts.updates
    //     };
    //   } else {
    //     return null;
    //   }
    // }
  
    componentWillReceiveProps(nextProps) {
      if (nextProps) {
        let personal = nextProps.profile.profile.personalInfo;
        let account = nextProps.profile.profile.accountInfo;
        this.setState({
          firstName: personal.firstName,
          lastName: personal.lastName,
          email: personal.email,
          address1: personal.address1,
          address2: personal.address2,
          zipCode: personal.zipCode,
          phone: personal.phone,
          contactMethod: account.contactMethod,
          plan: account.plan,
          apptReminders: account.alerts.apptReminders,
          updates: account.alerts.updates
        });
      }
    }
  </code></pre>
  
  <p>this.props.getCurrentProfile() sends an axios request to mongoDB and receives the profile of the current user.</p>
  
  <p>The issue is that if I use the getDerivedStateFromProps method, the text fields are static and cannot be edited. And even using the componentWillMount method, I get an error if I refresh the page from the browser saying the profile is null.</p>
  
  <p>I am very new to React and the lifecycle methods and would greatly appreciate any feedback on what I'm doing incorrectly and also why componentWillReceiveProps is being deprecated.</p>
  
  <p>Thanks in advance</p>