I am writing a Storybook for a child element where the parent will manage the state. For example, the value(string) and the onChange(func) are passed through props. I have both props being passed, but I'm unsure how to update the state in the storybook file.
textfield.tsx
import React, { FC, HTMLProps } from 'react';
type FirstNameTextFieldProps = HTMLProps<HTMLInputElement>
const FirstNameTextField: FC<FirstNameTextFieldProps> = ({
...restOfProps
}) => (
<input
type="text"
id="fname"
name="fname"
{...restOfProps}
/>
);
export default FirstNameTextField;
Storybook file
import React from 'react';
import { Story, Meta } from '@storybook/react/types-6-0';
import FirstNameTextField from './test';
export default {
title: 'FirstNameTextField',
component: FirstNameTextField,
description: 'A First Name TextField.',
} as Meta;
const Template: Story = (args) => <FirstNameTextField {...args} />;
export const Default = Template.bind({});
Default.args = {
value: 'Jason',
onChange: () => Alert('value changed'),
};
My actual component is more complex, but I wanted to show the issue more easily.