# Setting state using @builder.io/react?

**URL:** <https://forum.builder.io/t/setting-state-using-builder-io-react/43>\
**Category:** CMS\
**Tags:** react, state-and-actions\
**Created:** [April 6, 2020, 9:40pm UTC](https://forum.builder.io/t/setting-state-using-builder-io-react/43 "2020-04-06T21:40:45Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![cjl](https://avatars.discourse-cdn.com/v4/letter/c/b487fb/32.png) [@cjl](https://forum.builder.io/u/cjl)\
**Post date:** [April 6, 2020, 9:40pm UTC](https://forum.builder.io/t/setting-state-using-builder-io-react/43/1 "2020-04-06T21:40:45Z")

</div>

Hi,

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

Cheers!

---

<div class="post-metadata">

**Author:** ![steve](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/steve/32/78_2.png) [@steve](https://forum.builder.io/u/steve)\
**Post date:** [April 6, 2020, 11:54pm UTC](https://forum.builder.io/t/setting-state-using-builder-io-react/43/2 "2020-04-06T23:54:27Z")

</div>

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:

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

```

And them use them in [Builder.io](http://Builder.io) content as

`state.products`, `state.myFunction()` etc

You can see more examples of that in [this guide](https://www.builder.io/c/docs/react/custom-actions), more about the Readk SDK API [here](https://github.com/BuilderIO/builder/tree/master/packages/react#passing-data-and-functions-down) and more about binding that data to the UIs over [here](https://www.builder.io/c/docs/guides/connecting-api-data) (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!

---

<div class="post-metadata">

**Author:** ![50DN](https://avatars.discourse-cdn.com/v4/letter/5/977dab/32.png) [@50DN](https://forum.builder.io/u/50DN)\
**Post date:** [April 27, 2021, 6:17am UTC](https://forum.builder.io/t/setting-state-using-builder-io-react/43/3 "2021-04-27T06:17:55Z")

</div>

Hi @steve,

Does this work in Angular ?

---

<div class="post-metadata">

**Author:** ![aziz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/aziz/32/2551_2.png) [@aziz](https://forum.builder.io/u/aziz)\
**Post date:** [April 27, 2021, 5:56pm UTC](https://forum.builder.io/t/setting-state-using-builder-io-react/43/4 "2021-04-27T17:56:57Z")

</div>

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](https://github.com/BuilderIO/builder/tree/master/packages/angular#use-your-state-or-functions-in-your-builder-pages)

---

<div class="post-metadata">

**Author:** ![christopher\_dev](https://avatars.discourse-cdn.com/v4/letter/c/958977/32.png) [@christopher\_dev](https://forum.builder.io/u/christopher_dev)\
**Post date:** [January 6, 2022, 5:12pm UTC](https://forum.builder.io/t/setting-state-using-builder-io-react/43/5 "2022-01-06T17:12:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ancheetah](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/ancheetah/32/751_2.png) [@ancheetah](https://forum.builder.io/u/ancheetah)\
**Post date:** [January 7, 2022, 9:11pm UTC](https://forum.builder.io/t/setting-state-using-builder-io-react/43/6 "2022-01-07T21:11:40Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![christopher\_dev](https://avatars.discourse-cdn.com/v4/letter/c/958977/32.png) [@christopher\_dev](https://forum.builder.io/u/christopher_dev)\
**Post date:** [January 8, 2022, 12:52am UTC](https://forum.builder.io/t/setting-state-using-builder-io-react/43/7 "2022-01-08T00:52:31Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ancheetah](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/ancheetah/32/751_2.png) [@ancheetah](https://forum.builder.io/u/ancheetah)\
**Post date:** [January 13, 2022, 7:28pm UTC](https://forum.builder.io/t/setting-state-using-builder-io-react/43/8 "2022-01-13T19:28:31Z")

</div>

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.