dummy React state from design props?

[ericandrewscott]

Is there a way for me to scaffold some React state and have it use data from props? Let me give you an example.
We have a Slider component, and based on the value in the design component, we'd like to scaffold the right value in state.

Here's our current code:

figma.connect(
  Slider,
  'https://www.figma.com/design/<OBFUSCATED>',
  {
    props: {
      initialValue: figma.enum('Max value', {
        '0': 0,
        '10': 10,
        '20': 20,
        '30': 30,
        '40': 40,
        '50': 50,
        '60': 60,
        '70': 70,
        '80': 80,
        '90': 90,
        '100': 100,
      }),
      ...sharedProps,
    },
    example: ({ ticks, disabled, initialValue }) => {
      const [value, setValue] = React.useState<number>(/* value from below */);

      const handleSliderChange = (value: number) => {
        setValue(value);
      };

      return (
        <Slider
          ticks={ticks}
          id={'INSERT_ID'}
          name={'INSERT_NAME'}
          type="single"
          disabled={disabled}
          min={0} // or other min
          max={100} // or other max
          handleChange={handleSliderChange}
          value={initialValue} // replace with value from state
        />
      );
    },
  },
);

But we'd like to do:
const [value, setValue] = React.useState<number>(initialValue)
and have it render as the integer from the props.

And then in the props itself, have it be:
<Slider ... value={value} />

For now, it's easier to instruct our users with comments how to hook it up, but it's not ideal.

• Code Connect CLI version 1.1.13
• OSX Operating system

[rrabherufigma]

Hi @ericandrewscott . This has been supported in the new release.

[ericandrewscott]

@rrabherufigma I don't think this is fixed. I updated to 1.1.4 and published, and I still get:

const [value, setValue] = React.useState<number>(initialValue)

This is from the props:

    props: {
      initialValue: figma.enum('Max value', {
        '0': 0,
        '10': 10,
        '20': 20,
        '30': 30,
        '40': 40,
        '50': 50,
        '60': 60,
        '70': 70,
        '80': 80,
        '90': 90,
        '100': 100,
      }),
      ...sharedProps,
    },

I would expect it to render: const [value, setValue] = React.useState<number>(80)