I've been working on updating the values of initUsers on the DOM. The initial state values work fine, but when I try to update initUsers, it displays different values than expected.
Essentially, entriesNum receives a number as an event and changes the order of the initUsers state value based on that number:
Enter Image J Here
to this :
enter image description here
const [iteratedUsers, setIteratedUsers] = 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 (iteratedUsers.length >= event.target.value) {
Newobj.push(
iteratedUsers.splice(0, event.target.value).reduce((obj, key, i) => {
obj[i] = key;
return obj;
}, {})
);
} else {
Newobj.push(
iteratedUsers.splice(0).reduce((obj, key, i) => {
obj[i] = key;
return obj;
}, {})
);
}
}
setNewobj([]);
setIsNewObj(true);
setUsers(Newobj);
setIteratedUsers(users);
};
Due to having two forms of initUsers, I had to set up 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 destructures the initUsers when it is not nested and shows the following result:
enter image description here
The first one destructures it in its nested form and shows the following result:
enter image description here
Instead of getting 5 rows, the result of destructuring the nested initUsers gives me 9.