setState nested object in a map function - reactjs

Question

My State Object is a array that holds objects.PS:(Feel free to change the structure) Here is the structure:
{
type: ListOfTypes[Math.floor(Math.random() * ListOfTypes.length)],
name: ListOfNames[Math.floor(Math.random() * ListOfNames.length)],
id: nanoid(),
channels: [
{
id: nanoid(),
Name: ListOfChannels[Math.floor(Math.random() * ListOfChannels.length)],
Files: [ { folder: "Folder", documents: [ { doc: "WordDoc1.doc", isChecked: false, id:nanoid() }, { doc: "WordDoc2.doc", isChecked: false, id:nanoid() }, { doc: "WordDoc3.doc", isChecked: false, id:nanoid() }, { doc: "WordDoc4.doc", isChecked: false, id:nanoid() }] }, ],
},
{
id: nanoid(),
Name: ListOfChannels[Math.floor(Math.random() * ListOfChannels.length)],
Files: [{ folder: "Folder", documents: [ { doc: "WordDoc1.doc", isChecked: false, id:nanoid() }, { doc: "WordDoc2.doc", isChecked: false, id:nanoid() }, { doc: "WordDoc3.doc", isChecked: false, id:nanoid() }, { doc: "WordDoc4.doc", isChecked: false, id:nanoid() }] }, ],
},
{
id: nanoid(),
Name: ListOfChannels[Math.floor(Math.random() * ListOfChannels.length)],
Files: [{ folder: "Folder", documents: [ { doc: "WordDoc1.doc", isChecked: false, id:nanoid() }, { doc: "WordDoc2.doc", isChecked: false, id:nanoid() }, { doc: "WordDoc3.doc", isChecked: false, id:nanoid() }, { doc: "WordDoc4.doc", isChecked: false, id:nanoid() }] }, ],
}
]
}
I want to change all the isChecked in every channel object, currently I'm using this function but it doesn't work as intended.
const handleChange = () => {
const ConnectionsArray = List.map( (connection) => connection.id == connectionId ?
{
...connection,
channels: connection.channels.map( (channel) => channel.Name == channelName ? {
...channel,
Files: channel.Files.map((file) => ({
...file,
documents: file.documents.map((doc) => ({ ...doc, isChecked: !doc.isChecked }) )
}))
} : channel)
} : connection)
setList(ConnectionsArray)
};

Answer 1

This should do it:
function toggleChecked (connections) {
return connections.map(connection => (connection.id === connectionId
? {
...connection,
channels: connection.channels.map(channel => (channel.Name === channelName
? {
...channel,
Files: channel.Files.map(file => ({
...file,
documents: file.documents.map(doc => ({
...doc,
isChecked: !doc.isChecked,
})),
})),
}
: channel)),
}
: connection));
}
Use like this:
setList(list => toggleChecked(list));
Here's another function to help with getting a random item from an array (I notice you're repeating a lot math expressions to do this in your code):
function getRandomElement (array) {
return array[Math.floor(Math.random() * array.length)];
}
Use like this:
// before
ListOfTypes[Math.floor(Math.random() * ListOfTypes.length)]
// after
getRandomElement(ListOfTypes)

Answer 2

Probably a good time to learn how to use the "immer" library. It's perfect for situations like these where you need to make changes too deeply nested objects. Without it, making changes to objects like the one you're dealing with gets really messy and hard to deal with.
Immer is really easy to pick up and learn in a day or two. If you used it, your code could be reduced to this:
import produce from 'immer';
const handleChange = ()=>{
const ConnectionsArray = produce(List, draft=>{
draft.forEach((object)=>{
object.channels.forEach((channel)=>{
channel.Files.forEach((file)=>{
file.documents.forEach((document)=>{
document.isChecked = !document.isChecked;
})
})
})
})
})
}
I didn't run this code so not 100% sure it works. Either way, something like this with immer will work and be a lot easier to deal with. Notice you don't have to deal with the spread syntax or any of that, and immer will actually be creating a new object so it avoids any of the headaches associated with mutable data.

Answer 3

Check this:
const handleChange = () => {
setList(prevState => {
let ConnectionsArray = [...prevState];
const itemIndex = ConnectionsArray.find(item => item.id === connectionId);
const connection = {...ConnectionsArray[itemIndex]};
ConnectionsArray[itemIndex] = {
...connection,
channels: connection.channels.map( (channel) => channel.Name == channelName ? {
...channel,
Files: channel.Files.map((file) => ({
...file,
documents: file.documents.map((doc) => ({ ...doc, isChecked: !doc.isChecked }) )
}))
} : channel)
};
return ConnectionsArray;
})
};