How to pass data from custom component to other components

I made this text editor on retool using custom component.
And I want to pass input data on “customcomponent1” to “text30”
However I have no idea how to pass that.

I checked this site, but I couldn’t understand well.

If you are familiar with that, please tell me how to pass data from “customcomponent1” to “text30”.

Hey @jumpei! To reference data from your custom component, you can use the modelUpdate function in your custom component to set your data, and then reference it throughout Retool with {{ customComponent.model.data }}. The example in the docs runs like this:

 const MyCustomComponent = ({ triggerQuery, model, modelUpdate }) => (
    <Input
        color="primary"
        variant="outlined"
        value={model.textInputValue}
        onChange={(e) =>
          modelUpdate({ name: e.target.value })
        }
    />
  );

You can see that in the Input component, we’re running a function via the onChange prop (see the Material UI docs here) that updates the custom component’s model to add a “name” field with a value of target.value. If you had named this custom component customComponent1 you’d be able to reference this property with {{ customComponent1.model.name }}.

Does this help?

Hi Justin,
thank you so much for your tips!!
I’m gonna try that :slight_smile:
Jumpei.

1 Like