Issue #5199๐Ÿ’ฌ AnsweredOpened Jun 23, 2023by rmadeiraneto0 reactions

Changes in component's attributes being reproduced in all the instances instead of just one

Quick answerby artf

Thanks @rmadeiraneto for the report. Yeah, unfortunately that's an issue if you're mutating arrays/objects properties in that way and to avoid that you have 2 options:Avoid direct mutations (assign new references when you have to update them)Define defaults as a function But unfortunately... the second options doesn't...

Read full answer below โ†“

Question

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v114 Reproducible demo link https://jsfiddle.net/rmadeiraneto/t659usxv/39/ Describe the bug How to reproduce the bug?Go to the blocks list and drag the custom component "example" to the canvasThree elements that are coming from a default attribute (array) are displayed in the canvasSelect the "Example" componentGo to the traits panel and click on the plus icon a couple of timesThis would add items to the array that is in the attributes of the Example component and draw them in the pageDrag...

Answers (3)

artfโ€ข Jul 4, 2023

Thanks @rmadeiraneto for the report. Yeah, unfortunately that's an issue if you're mutating arrays/objects properties in that way and to avoid that you have 2 options:Avoid direct mutations (assign new references when you have to update them)Define defaults as a function But unfortunately... the se...

rmadeiranetoโ€ข Jul 17, 2023

@artf using defaults as a function works, thanks for quick response and for providing the alternative fix on this issue. About the first suggestion, I think it's not about people should mutate or not the object, because we're talking about using the provided method (set). I'm sorry I didn't have th...

GJS Helperโ€ข May 17, 2026

The issue you've described is a common JavaScript pitfall related to how mutable objects (like arrays and objects) are handled when assigned as default values. In GrapesJS, when you define a component with defaults that include arrays or objects, these are assigned by reference to new component ins...

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins โ†’
Premium option

Premium plugins ship with support, regular updates, and production-ready features โ€” save days of integration work.

Browse premium plugins โ†’

Related tutorials

In-depth guides on the same topic.

All tutorials โ†’

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.