Get object data from Forms and Datepicker Forge

JSM Development JSM Cloud
, , ,
1

I copied some of the examples on the documentation Forge (https://developer.atlassian.com/platform/forge/ui-kit-components/form/#form)

The below code will output:

{ Start_date: ‘2022-10-01’, End_date: ‘2022-10-31’ }

Now how do I get objects from the returned data i.e

data.Start_date
data.End_date

Please see below sample code. Thanks

const App = () => {
    const [formState, setFormState] = useState(undefined);

    const onSubmit = async (formData) => {
        /**
         * formData:
         * {
         *    username: 'Username',
         *    products: ['jira']
         * }
         */
        setFormState(formData);
      };

    const goBack = () => {};
    const cancel = () => {};

    // The array of additional buttons.
    // These buttons align to the right of the submit button.
    const actionButtons = [
        <Button text="Go back" onClick={goBack} />,
        <Button text="Cancel" onClick={cancel} />,
    ];
    const data = JSON.stringify(formState);

    return (
        <Fragment>
            <Form onSubmit={onSubmit} actionButtons={actionButtons}>
                <DatePicker name="Start_date" label="Start Date"/>
                <DatePicker name="End_date" label="End Date"/>
            </Form>
            {formState && 
            <Text> 
                { data }
            </Text>}
        </Fragment>
    );
};

export const run = render(
    <QueuePage>
        <App />
    </QueuePage>
);

Thank you for reading

2

Hi @XavierJohanisElnas
Where exactly do you want to get data.Start_date and data.End_date?