Update state with useEffect from another page using React hooks

Question

I want to update state with data from another page. After trying to update state I'm getting error:

index.js:1375 Warning: A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

How to properly update state using hooks ??

const [data, changeData] = useState({
    name: '',
    email: '',
    phone: '',
    cv: '',
    documents: '',
    rodo: false,
    regulations: false,
  });

  useEffect(() => {
    if (location.data) {
      changeData((prevState) => {
        return { data: { name: location.data.name } };
      });
    }
  }, []);

Input

<div className='form-control'>
                <label htmlFor='name'>
                  <i className='fas fa-user'></i>
                </label>
                <input
                  value={data.name}
                  id='name'
                  name='name'
                  onKeyPress={handleKeyPress}
                  onChange={(e) => handleChangeData(e, 'name')}
                  type='text'
                  placeholder='Imię i nazwisko'
                />
              </div>

Possible duplicate of stackoverflow.com/questions/47012169/… — Jonas Wilms
– Jonas Wilms, Commented Aug 30, 2019 at 12:41
You should use useReducer instead useState for complex objects offical docs — Adolfo Onrubia
– Adolfo Onrubia, Commented Aug 30, 2019 at 12:41

Rikin · Accepted Answer · 2019-12-14 16:55:45Z

3

Side-effect of coming from Class based component. What you were trying to do in your code is replace entire previous state stored in data with new object that looked like below:

{ data: { name: location.data.name } }

In Hooks world you define individual item to have individual useState but to continue on what you are working on here's the fix:

const [data, changeData] = useState({
  name: '',
  email: '',
  phone: '',
  cv: '',
  documents: '',
  rodo: false,
  regulations: false,
});

useEffect(() => {
  if (location.data) {
    changeData({
      ...data,
      name: location.data.name
    });
  }
}, []);

Ideally you should be defining individual items in the state something like below:

const [name, changeName] = useState('');
const [email, changeEmail] = useState('');
....
const [rodo, changeRodo] = useState(false);

And then in your useEffect hook you will change individual item like below:

useEffect(() => {
  if (location.data) {
    changeName(location.data.name);
  }
}, []);

This way, name is always defined, and thus the <input />s value was always set, or controlled. Read on

edited Dec 14, 2019 at 16:55

answered Aug 30, 2019 at 12:36

Rikin

5,4842 gold badges17 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Adolfo Onrubia Over a year ago

Cautiion: This will only run in "componentDidMount" lifecycle. because of}, []);

Freestyle09 Over a year ago

And how to pass all data?? not only location.data.name but all data.location? How to update all state ??

Jonas Wilms Over a year ago

While you are right, this does not answer the question.

Rikin Over a year ago

@JonasWilms the issue is OP is resetting the data and in useEffect which is causing prior known properties to null and thus React raises the issue.

Jonas Wilms Over a year ago

Yes, and exactly that piece of information was missing. I added that.

|

Collectives™ on Stack Overflow

Update state with useEffect from another page using React hooks

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related