Setting state using @builder.io/react?

Technical Questions CMS
,
1

Hi,

Is it possible to set state using @builder.io/react ?

Cheers!

2

Thanks for the Q @cjl!

You absolutely can - using the data prop of the BuilderComponent React component.

Anything you pass there will be available on state in the Builder content.

You can pass any data, including functions, nested data, etc down, e.g:

<BuilderComponent 
  model="page" 
  data={{
    products: productsList,
    myFunction: () => alert('Triggered!'),
    foo: 'bar'
  }} />

And them use them in Builder.io content as

state.products, state.myFunction() etc

You can see more examples of that in this guide, more about the Readk SDK API here and more about binding that data to the UIs over here (binding data passed down works the same as data you connect via a URL)

Hope this helps and let us know if we can elaborate on anything here or answer any followup questions of yours about this!

3

Hi @steve,

Does this work in Angular ?

4

Hi @50DN, for angular you can use the @builder.io/angular package and follow the example here builder/packages/angular at master · BuilderIO/builder · GitHub

5

Greetings, is there a way of listening to this state data inside the registered components that are dropped inside a page/section?

6

Hi @christopher_dev can you give more details about what you’re trying to accomplish? Once your registered component is dropped onto a page in the visual editor you can use data binding to bind its inputs to state.

7

What I mean is to 1) register state on visual editor, 2) edit it inside button of child component 1 to 3) listen in child component 2. Right now the approach I’m taking is setting up a context provider.

8

Hi @christopher_dev, thank you for your patience. Although we do pass builderState/builderContext to each custom component, it’s not meant to be mutated inside a child component. Wrapping <BuilderComponent> with a Context Provider is the right approach here.