0

I follow a tutorial and I know that componentWillReceiveProps will soon be out from React, so I tried myself to replace it with static getDerivedStateFromProps;

So I have a form where I can add a user profile and then edit that profile. With componentWillReceiveProps I get the data in edit profile page and I can edit it, but with getDerivedStateFromProps I only get it, but I can't type anything in the input fields.

Can anyone tell me why?

State:

state = {
    displaySocialInputs: false,
    handle: '',
    company: '',
    website: '',
    location: '',
    skills: '',
    errors: {},
  };

componentWillReceiveProps:

componentWillReceiveProps(nextProps) {
    if (nextProps.errors) {
      this.setState({ errors: nextProps.errors });
    }

    if (nextProps.profile.profile) {
      console.log(nextProps.profile.profile)
      const profile = nextProps.profile.profile;

      // Bring skills array back to CSV
      const skillsCSV = profile.skills.join(',');

      // If profile field doesnt exist, make empty string
      profile.company = !isEmpty(profile.company) ? profile.company : '';
      profile.website = !isEmpty(profile.website) ? profile.website : '';
      profile.location = !isEmpty(profile.location) ? profile.location : '';
      profile.skills= !isEmpty(profile.skills) ? profile.skills : '';

      // Set component fields state
      this.setState({
        handle: profile.handle,
        company: profile.company,
        website: profile.website,
        location: profile.location,
        skills: skillsCSV,
      });
    }
  }

and static getDerivedStateFromProps, the one that I put it instead of the above one:

static getDerivedStateFromProps(nextProps, prevState) {
    // if there is an error
    if (nextProps.errors !== prevState.errors) {
      // then add it to errors object
      return { errors: nextProps.errors };
    }

    if (nextProps.profile.profile) {
      console.log(nextProps.profile.profile)
      const profile = nextProps.profile.profile;

      // Bring skills array back into CSV
      const skillsCSV = profile.skills.join(',');

      // If profile field doesn't exist, make empty string
      // if is not empty, then use it, else add ''
      profile.company = !isEmpty(profile.company) ? profile.company : '';
      profile.website = !isEmpty(profile.website) ? profile.website : '';
      profile.location = !isEmpty(profile.location) ? profile.location : '';
      profile.skills = !isEmpty(profile.skills) ? profile.skills : '';

      // Set component fields state
      return {
        handle: profile.handle,
        company: profile.company,
        website: profile.website,
        location: profile.location,
        skills: skillsCSV
      }
    }
    return null;
  };

I searched a lot on internet and I saw that with getDerivedStateFromProps you neeed componentDidUpdate:

componentDidUpdate(prevProps, prevState) {
    if (prevProps.errors !== this.props.errors) {
      this.setState({ errors: this.props.errors })
    }

    if (prevProps.profile !== this.props.profile) {
      const profile = this.props.profile.profile;
      // Bring skills array back into CSV
      // join back into a string by comma
      const skillsCSV = profile.skills.join(',');

      // If profile field doesn't exist, make empty string
      // if is not empty, then use it, else add ''
      profile.company = !isEmpty(profile.company) ? profile.company : '';
      profile.website = !isEmpty(profile.website) ? profile.website : '';
      profile.location = !isEmpty(profile.location) ? profile.location : '';
      profile.status = !isEmpty(profile.status) ? profile.status : '';
      profile.skills = !isEmpty(profile.skills) ? profile.skills : '';

      // Set component fields state
      this.setState({
        handle: profile.handle,
        company: profile.company,
        website: profile.website,
        location: profile.location,
        status: profile.status,
        skills: skillsCSV
      });
    }
  }
  • Your question is confusing. How is the state connected to the input fields you said you can't edit? Does the state not get updated correctly? – Dor Shinar Jan 19 '19 at 18:55
  • I'm new to react my friend. And yes if I use getDerivedStateFromProps I can't type in any input to edit it. But if I use componentWillReceiveProps I can change any value from any input field. I have a simple form with inputs where I bring data to edit it and use onChange and onSubmit methods. The problem is only with getDerivedStateFromProps . I guess I did't set up it correctly or with her heper componentDidUpdate. Maybe this last one I didn't use it correctly. I don't know. –  Jan 19 '19 at 19:03
  • It's ok that you are new to react, I'm here to help you. Could you share the full component's code? – Dor Shinar Jan 19 '19 at 19:46

0 Answers0