# Pass functions down to be called from Builder.io content with React

**URL:** <https://forum.builder.io/t/pass-functions-down-to-be-called-from-builder-io-content-with-react/1067>\
**Category:** General\
**Created:** [September 27, 2021, 4:20pm UTC](https://forum.builder.io/t/pass-functions-down-to-be-called-from-builder-io-content-with-react/1067 "2021-09-27T16:20:30Z")\
**Posts on this page:** 3\
**Page:** 1

<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:** [September 27, 2021, 4:20pm UTC](https://forum.builder.io/t/pass-functions-down-to-be-called-from-builder-io-content-with-react/1067/1 "2021-09-27T16:20:30Z")

</div>

If you have a use case where you want to provide callable functions you can trigger from your Builder content there is a very easy solution with our React SDK. This can be very useful for having buttons created in Builder call functions in your app on click, to do things like add a product to cart, trigger a modal, etc.

To do this, first you will want to pass down the functions you want to call as `context`

```auto
<BuilderComponent name="my-model" context={{ addToCart: () => { ... } }} />

```

Then in Builder, select the layer you want to call this function, and add a new click event handler to it. To do this, first up your content and select the element you want to call `addToCart` on click, go to the `data` tab and choose `+ new event`

 ![png](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/b9f5758ddf02c2c27fcc276213b949adf2f4129d.jpeg)

Choose “edit action”

 ![shot 2](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/080b338aa5f7ea44f909b197d7173d3d24ecb5de.jpeg)

Then in the code editor enter:

```auto
context.addToCart()

```

 ![code](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/e42def233d8a38af582a376f46f6ac48e9ae77be.jpeg)

And you’re done! Anything you pass down as context can be called from the `context `object in [any custom JS code in Builder](https://www.builder.io/c/docs/guides/custom-code)

---

<div class="post-metadata">

**Author:** ![luigiveoworld](https://avatars.discourse-cdn.com/v4/letter/l/bc8723/32.png) [@luigiveoworld](https://forum.builder.io/u/luigiveoworld)\
**Post date:** [November 29, 2021, 12:16pm UTC](https://forum.builder.io/t/pass-functions-down-to-be-called-from-builder-io-content-with-react/1067/2 "2021-11-29T12:16:56Z")

</div>

Hi Steve, I’ve read in the builder/react README that we can pass functions trough context and data props. But I want to understand what’s the best practice if you want to pass a function that updates the state of my react app? Is it context or data prop? I’ve noticed that passing the function in data prop and using a builder Input form component the input doesn’t work as expected. I’ve bound `state.updateState(event.target.value)` and the input only updates with the last typed character. It works well with context prop though. `context.updateState(event.target.value)`  
When should we use data to pass functions?

---

<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:** [November 29, 2021, 5:14pm UTC](https://forum.builder.io/t/pass-functions-down-to-be-called-from-builder-io-content-with-react/1067/3 "2021-11-29T17:14:57Z")

</div>

Hey @luigiveoworld - a good rule of thumb is put your functions in context and your data in state. Better docs here are in progress but I hope that is helpful in the short term 🙂