HTML Attributes changes through state are not appearing unless re-render

Issues
1

What are you trying to do? (please be as specific as possible and include relevant screenshots, code snippets)

I am trying to update the html attribute (style) through state. Even though the values are getting updated in state. It is not reflecting on the page unless re-rendered.

This is what my state looks like. Lets say I am trying to update “backgroundColor”: “#ffffff” of the section. I am using color picker and on change interaction of color picker, I am running the code to update the state. Changes are very well reflected in the state. I have linked this state to a change the html attributes of a component lets say a column. It doesn’t reflect the changes unless I re-render the component.

TRY THIS. THIS EXPLAINS THE ISSUE IN SIMPLE TERMS

I have created a separate component to explain this
https://studio.plasmic.app/projects/u5enwxsNkAs5cmvjfcmPq4/-/test?arena_type=component&arena=sqkl9Io3VYDw

{
“sections”: [
{
“type”: “hero”,
“style”: {
“padding”: “20px”,
“textAlign”: “center”,
“backgroundColor”: “#ffffff”
},
“isVisible”: true,
“containers”: [
{
“style”: {
“margin”: “10px 0”,
“display”: “flex”,
“alignItems”: “center”,
“flexDirection”: “column”,
“justifyContent”: “center”
},
“blocks”: [
{
“type”: “vertical”,
“style”: {
“border”: “1px solid #ddd”,
“padding”: “10px”
},
“components”: [
{
“type”: “Heading”,
“style”: {
“color”: “#333”,
“fontSize”: “24px”,
“marginBottom”: “10px”
},
“content”: {
“text”: “Welcome to Our Marketplace”
}
},
{
“type”: “Paragraph”,
“style”: {
“color”: “#666”,
“fontSize”: “16px”,
“lineHeight”: “1.5”
},
“content”: {
“text”: “Find everything you need, from products to services, rentals to freelancers. Join our vibrant community today!”
}
}
]
},
{
“type”: “horizontal”,
“style”: {
“gap”: “10px”,
“display”: “flex”
},
“components”: [
{
“type”: “Button”,
“style”: {
“color”: “#fff”,
“border”: “none”,
“cursor”: “pointer”,
“padding”: “10px 20px”,
“borderRadius”: “5px”,
“backgroundColor”: “#007bff”
},
“content”: {
“link”: “/explore”,
“text”: “Start Exploring”
}
},
{
“type”: “Button”,
“style”: {
“color”: “#fff”,
“border”: “none”,
“cursor”: “pointer”,
“padding”: “10px 20px”,
“borderRadius”: “5px”,
“backgroundColor”: “#6c757d”
},
“content”: {
“link”: “/another-link”,
“text”: “Learn More”
}
}
]
}
]
},
{
“style”: {
“margin”: “10px 0”,
“display”: “flex”,
“alignItems”: “center”,
“flexDirection”: “column”,
“justifyContent”: “center”
},
“blocks”: [
{
“type”: “vertical”,
“style”: {
“border”: “1px solid #ddd”,
“padding”: “10px”
},
“components”: [
{
“type”: “Image”,
“style”: {
“width”: “100%”,
“height”: “auto”
},
“content”: {
“src”: “https://hounudmkadqhtgdtcjbc.supabase.co/storage/v1/object/public/images/14c8bda2-fb66-4fe0-81be-d4eb90b31fbb”
}
}
]
}
]
}
],
“sectionName”: “hero_section_1”
}
],
“Page-style”: {
“backgroundColor”: “#ede9e9”
}
}

What are the reproduction steps?

Relevant links:

2

@icaro_guerra @icaro_guerra1 Request you to look into this please

3

Hey @quicksaas.

The issue that I see is that, since states are like React States, you can’t modify a single path of it.

What you would need to do is set it like this, by setting the entire object.

$state.style2 = {
  sections: [{ style: {...$state.style2.sections[0].style, backgroundColor: color }}, ...$state.style2.sections.slice(1)]
}

Hope it helps.

4

Thanks for the update. Problem is not with updating the single path of the state. I am able to update the single path of the state but it doesn’t reflect the change unless re-rendered