How to update Custom Component state from a JS query

[SatheeshRL]

I have a custom component which has 1 state variable.

import React, { useRef, useEffect } from 'react'
import { type FC } from 'react'
import { Retool } from '@tryretool/custom-component-support'


export const MyCustomComponent: FC = () => {

  Retool.useComponentSettings({
    defaultWidth: 80,
    defaultHeight: 30
  });

  const [param, setParam ] = Retool.useStateString({
    name: 'param',
    inspector: "hidden"
  })



  const divRef= useRef<HTMLDivElement>(null)
  useEffect(() => {
     //my custom logic here.. param1 is used
    }
  }, [param]);



  return (
      <div>
        <div ref={divRef}></div>
      </div>
  )
}

the value of param1 is used to render some data.

Now once this component is added to an app, how can I set the value of "param1" from a javascript query?

[WidleStudioLLP]

Hello @SatheeshRL ,

You can set the value of the param1 state in your custom component by using Retool's setValue method in a JavaScript

customComponent1.setValue("param1", "newValue");

This will update the param1 value dynamically in your custom component.

[SatheeshRL]

Is there anything I need to do to expose setValue ?

because I am getting the error

customComponent.setValue is not a function

[WidleStudioLLP]

You can update the custom component model using updateModel.

Update custom component model from JS Query

Hey @Ron_West! Have you seen this section of that doc? https://docs.retool.com/docs/custom-components#pass-data-from-your-app-to-your-custom-component Basically, if you pass this variable into the model, you can reference the variable value inside your custom component! [image]

[SatheeshRL]

@Update custom component model from JS Query

Getting started with custom component libraries | Retool Docs

Is that a legacy custom component which you have linked to?
The example I shared is the new "custom component library" .
I don't think there is a "updateModel"

[Tess]

Hi @SatheeshRL,

param should be exposed as a variable in the custom component configuration in the Retool editor.

See our docs for an example:

You can set the value of param to be any dynamic value, inside {{}}. You could use a transformer, query, or variable. A variable would allow you to programmatically run variableName.setValue('new value') as needed within your app. Just keep in mind that variables get reset on page load