been trying to update initUsers values on the DOM so the initial state values it works just fine but when i update initUsers it renders different values from the expected ones .
so basically entriesNum get a number as an event and based on it changes the order of initUsers state value from something like this :
enter image j here
to this :
enter image description here
` const [itteratedUsers, setItteratedUsers] = useState([...users]);
const [Newobj, setNewobj] = useState([]);
const [isNewObj, setIsNewObj] = useState(false);
const [initUsers, setUsers] = useState(users);`
` const entriesNum = (event) => {
const newi = Math.ceil(5 / event.target.value);
for (let i = 0; i < newi; i++) {
if (itteratedUsers.length >= event.target.value) {
Newobj.push(
itteratedUsers.splice(0, event.target.value).reduce((obj, key, i) => {
obj[i] = key;
return obj;
}, {})
);
} else {
Newobj.push(
itteratedUsers.splice(0).reduce((obj, key, i) => {
obj[i] = key;
return obj;
}, {})
);
}
}
setNewobj([]);
setIsNewObj(true);
setUsers(Newobj);
setItteratedUsers(users);
};`
because i have two forms of initUsers i hade to set two ways of destructuring like this :
`*{isNewObj
? initUsers.map((objUser ) => (
< >
{Object.keys(objUser).map((numo) => (
<div
key={numo}
className="contacts-info border-solid border-2 border-black table-row w-full "
>
<input type={"checkbox"} className={`${shortcut}`} />
<div className={`${shortcut}`}>
{objUser[numo].index}
</div>
<div className={`${shortcut}`}>
{objUser[numo].email}
</div>
<div className={`${shortcut}`}>
{objUser[numo].access}
</div>
</div>
))}
</ >
)) :
initUsers.map(({ index, handle, phone, email, access }) => (
<div
key={id}
className="contacts-info border-solid border-2 border-black table-row w-full "
>
<input type={"checkbox"} className={`${shortcut}`} />
<div className={`${shortcut}`}>{index}</div>
<div className={`${shortcut}`}>{handle}</div>
<div className={`${shortcut}`}>{phone}</div>
<div className={`${shortcut}`}>{email}</div>
<div className={`${shortcut}`}>{access}</div>
</div>
))}*`
the second condition destructur the initUsers when it is not nested and shows the following result :
enter image description here
and the first one destructure it in its nested form and shows the following result :
enter image description here
so instead of getting 5 rows the result of destructuring the nested initUsers i get 9 .
