When useState update then map loop is not working in array inside of object in useState. React js

Question

import { useState } from "react";
import React from "react";

function Check() {
    
const [Children, setChildren] = useState({data:[], otherdata:{}});
  
 function handleChange(){
 Children["data"] = [...Children["data"], Children["data"].length]
 setChildren(Children)
 alert(Children["data"])
 }

  return (<React.Fragment>
    <div>Check</div>
    {Children["data"].map(data => <div>map</div>)}
    <button
     onClick={handleChange}
    >Add List</button>
  </React.Fragment>);
}
    
export default Check

You need to update the actual object, not just the array inside of it, otherwise, you'll have a reference to the same object and react won't rerender: `setChildren({...Children, data: [...Children.data, Children.data.length]})` — Nick Parsons, Jul 11 '21 at 06:51

score 1 · Answer 1 · answered Jul 11 '21 at 06:57

1

For updating your state you must use your state setter, in this case setChildren and not set your state directly (not doing Children["data"] = [...Children["data"], Children["data"].length]).

answered Jul 11 '21 at 06:57

Shmulik Klein

3,754
19
34

score 1 · Accepted Answer · answered Jul 11 '21 at 06:59

try out this I have fixed issues-

import { useState } from "react";
import React from "react";

function Check() {
  const [Children, setChildren] = useState({ data: [], otherdata: {} });

  function handleChange() {
    setChildren({
      ...Children,
      data: [...Children["data"], Children["data"].length],
    });
  }

  return (
    <React.Fragment>
      <div>Check</div>
      {Children.data.map((ele) => (
        <div>{ele}</div>
      ))}
      <button onClick={handleChange}>Add List</button>
    </React.Fragment>
  );
}

export default Check;

When useState update then map loop is not working in array inside of object in useState. React js

2 Answers2

Linked