Can't save object inside array

Question

I have a state of array of object, and i want to save checked checkbox ids inside. in form of

[ 
 {
   name: 'Question 1',
   checked: '1,2' // so 1 and 2 was checked
 }
]

but with following code my state is either empty array of objects or contains only one object inside array when i uncheck checkbox.

  const { id, answer } = props.answers;
  const [answers, setAnswers] = useState([{}]);

  function handleChange(e) {
    setAnswers([{ name: e.target.name, checked: e.target.value }]);
    console.log(answers); // empty when i check checkbox, gets filled after unchecking
  }
  return (
    <Answer>
      <label>
        <input
          type="checkbox"
          name={answer}
          value={id}
          defaultChecked={false}
          onChange={handleChange}
        />
        {answer}
      </label>
    </Answer>
  );
}

Can you set a default state.

Mickers
– Mickers

2019-11-21 14:54:27 +00:00
Commented Nov 21, 2019 at 14:54 — Mickers
– Mickers, Commented Nov 21, 2019 at 14:54

rose specs · Accepted Answer · 2019-11-21 17:17:25Z

2

You cannot rely on a function like:

function handleChange(e) {
    setAnswers([{ name: e.target.name, checked: e.target.value }]);
    console.log(answers); 
  }

to have access to the new state this is because the setState function is asynchronous so you are trying to console.log a value that may not be set yet. Therefore you need to use a lifecycle method or the useEffect hook with answers as a dependancy (the second argument expects an array so as [answers]).

useEffect runs after first render and after ever render the answers state changes

useEffect(() => {
 console.log(answers) // get my new expected value of answers
}, [answers])

answered Nov 21, 2019 at 17:17

rose specs

1,3052 gold badges11 silver badges18 bronze badges

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

1 Comment

Rizabek Mukanov Over a year ago

You said I cannot rely on function like above, how would you change it, so it becomes reliable? Thank you

blueseal · Accepted Answer · 2019-11-21 15:17:32Z

0

useEffect will be rerun when answers is changed like so:

import react, {useState, useEffect} from 'react';

const [answers, setAnswers] = useState([{}]);

 handleChange = e =>{
    setAnswers([{ name: e.target.name, checked: e.target.value }]);
  }

  useEffect(() => {
     console.log(answers); //get the updated state here
  }, [answers]);

For more go through this

answered Nov 21, 2019 at 15:17

blueseal

2,9287 gold badges29 silver badges46 bronze badges

Collectives™ on Stack Overflow

Can't save object inside array

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related