#How To Setup State for Controlled Components

4 messages · Page 1 of 1 (latest)

rustic quarry
#

Hi There,

I am wonder what the best practice is for setting up state in a story for a controlled component. In other words, if the component takes value and onChangeCallback props I would like typing/clicking/etc to produce visual changes in the story and interactions. I have a solution but I can't remember where I found it and would like to know what the best practice is. I searched discord/docs/google for a while last night but nothing jumped out at me.

export default {
  component: MyControlledComponent,
} satisfies Meta<typeof MyControlledComponent>;

type Story = StoryObj<typeof MyControlledComponent>;

const MyControlledComponentWithState = () => {
  const [value, setValue] = useState();

  return (
    <MyControlledComponent value={value} onChangeCallBack={setValue} />
  );
};

export const Default: Story = {
  render: () => <MyControlledComponent />,
};

Thanks!

fossil lance
rustic quarry
#

Ah yes thanks. Looks like I had it right.

lean lance