loop through a variable and add it to react state variable

Question

I would like to iterate through an array and add the contents to a state variable as an object like so.

var interests = ['jumping', 'singing', 'dancing']   
const [dict, setDict] = useState({}) 

function onClickFunc(interests){
    for (var i=0; i<interests.length; i++){
        setDict({...dict, [interests[i]]: 'checked'})
    }

}

This code would return a dict value of {'dancing' : 'checked}. I want it to return {'jumping' : 'checked, 'singing' : 'checked, 'dancing' : 'checked}. I know this has something to do with setDict() being asynchronous but none of my solutions are working. Please help and Thanks.

Krzysztof Krzeszewski · Accepted Answer · 2022-01-27 14:22:25Z

3

You should just prepare dictionary first, and then set it's value only once.

function onClickFunc(interests){
    const newDict = Object.fromEntries(interests.map(interest => [interest, "checked"])) 
    setDict(newDict);
}

answered Jan 27, 2022 at 14:22

Krzysztof Krzeszewski

6,8382 gold badges23 silver badges33 bronze badges

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

Comments

Bin Rohan · Accepted Answer · 2022-01-27 14:27:28Z

0

export default function App() {
  var interests = ['jumping', 'singing', 'dancing'];
  const [dict, setDict] = React.useState({});

  function onClickFunc(interests) {
    // for (var i = 0; i < interests.length; i++) {
    //   setDict({ ...dict, [interests[i]]: 'checked' });
    // }
    const interestsDict = {};
    interests.forEach((i) => {
      interestsDict[i] = 'checked';
    });

    setDict(interestsDict);
  }
  return (
    <div>
      {console.log(dict)}
      <button onClick={onClickFunc.bind(null, interests)}>Click</button>
    </div>
  );
}

answered Jan 27, 2022 at 14:27

Bin Rohan

3544 silver badges13 bronze badges

Collectives™ on Stack Overflow

loop through a variable and add it to react state variable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related