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.

Shubham Khatri · Accepted Answer · 2017-08-30 13:18:12Z

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)
});

edited Aug 30, 2017 at 13:18

answered Aug 30, 2017 at 12:53

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Felix Over a year ago

thats not working, no I got errors calling the method.

Felix Over a year ago

TypeError: Cannot read property 'length' of undefined at ProcessStep.render (eval at ./src/frontend/component/processes/processSteps/ProcessStep.js (bundle.js:12154), <anonymous>:116:61)

Shubham Khatri Over a year ago

where are you getting [targetArray]: newArray,

Felix Over a year ago

target array is only a placeholder for a string. it comes as parameter

Felix Over a year ago

now stepsdata is always an object. Problem is only that

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

has no effect. targetArray is just a property of each step

|

chuve · Accepted Answer · 2017-08-30 13:19:59Z

1

Try to use immutability-helper util to solve it.

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

answered Aug 30, 2017 at 13:19

chuve

7387 silver badges20 bronze badges

Comments

Felix · Accepted Answer · 2017-08-30 13:49:11Z

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)
    });

Collectives™ on Stack Overflow

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

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related