reactJs setState change property on object within an array within an array

Question

I've got a problem again with changing a property on an object inside an array, but this time its an array in an array in an array ...

I've got a problem on changing the preview of the picture.

this has no effect:

return {
     ...picture,
     preview: "hallo"
}

The full code is:

this.setState((prevState) => ({
    stepsData: prevState.stepsData.map(step => {
        if (step.identifier === stepIdentifier) {
            console.log("lkkljk",step)

            step.onChangeContentComponents.map(
                contentComponent => {
                    if (contentComponent.pictures !== null){
                        console.log(contentComponent.pictures);
                        console.log(contentComponent.pictures[0].preview);

                        contentComponent.pictures.map(picture => {
                            return {
                                ...picture,
                                preview: "hallo"
                            }
                        });
                    }
                    return contentComponent
                }
            );

            return {
                ...step,
                [targetArray]: newArray,
            }
        }
        return step
    })
}), () => {
    console.log(this.state.stepsData)
});

thanks.

Answer 1

The problem is that step.onChangeContentComponents.map call's returning value is not being used anywhere. You would have to change your code to

this.setState((prevState) => ({
    stepsData: prevState.stepsData.map(step => {
        if (step.identifier === stepIdentifier) {
            console.log("lkkljk",step)

            var newStep = step.onChangeContentComponents.map(
                contentComponent => {
                    if (contentComponent.pictures !== null){
                        console.log(contentComponent.pictures);
                        console.log(contentComponent.pictures[0].preview);

                        contentComponent.pictures.map(picture => {
                            return {
                                ...picture,
                                preview: "hallo"
                            }
                        });
                    }
                    return contentComponent
                }
            );

            return newStep
        }
        return step
    })
}), () => {
    console.log(this.state.stepsData)
});

However I will advise you to not do complex calculations in setState and abstract out the calculations outside like

var stepsData = [...this.state.stepsData];
stepsData = stepsData.map(step => {
        if (step.identifier === stepIdentifier) {

            var newStep = step.onChangeContentComponents.map(
                contentComponent => {
                    if (contentComponent.pictures !== null){
                        console.log(contentComponent.pictures);
                        console.log(contentComponent.pictures[0].preview);

                        contentComponent.pictures.map(picture => {
                            return {
                                ...picture,
                                preview: "hallo"
                            }
                        });
                    }
                    return contentComponent
                }
            );

            return newStep
        }
        return step
     });

this.setState({stepsData}, () => {
    console.log(this.state.stepsData)
});

Answer 2

Try to use immutability-helper util to solve it.

Earlier this util was included into react-addons-update module.

Answer 3

solution could be

let stepsData = [...this.state.stepsData];
    stepsData = stepsData.map(step => {
        if (step.identifier === stepIdentifier) {
            return {
                ...step,
                [targetArray]: newArray,
                onChangeContentComponents: step.onChangeContentComponents.map(contentComponent => {
                        if (contentComponent.pictures !== null) {
                            return {
                                ...contentComponent,
                                pictures: contentComponent.pictures.map(picture => {
                                    console.log(picture)
                                    return {
                                        ...picture,
                                        preview: "hallo"
                                    }
                                })
                            }
                        }
                        return contentComponent
                    }
                )
            }
        }
        return step
    });
    this.setState({stepsData: stepsData}, () => {
        console.log(this.state.stepsData)
    });