Skip to content
Alex Johnson edited this page Mar 1, 2024 · 1 revision
const initialValues = {
    name: ''
    , email: ''
    , hobbies: []
};

const formStore = createFormStore( { initialValues } );

const App = () => {
    return (
        <div>
            <Formularity
                formStore={ formStore }
                onSubmit={ values => alert( JSON.stringify( values, null, '\t' ) ) }
            >
                { ( {
                    Field
                    , SubmitButton
                    , ResetButton
                } ) => (
                    <div
                        style={ {
                            width: '30%'
                            , display: 'flex'
                            , flexDirection: 'column'
                            , gap: '.5rem'
                        } }
                    >
                            <Field name='name'/>
                            <Field name='email'/>
                            <Field 
                               name='hobbies'
                               component='select'
                            >
                               <option value='soccer'>
                                  Soccer
                               </option>
                               <option value='baseball'>
                                  Baseball
                               </option>
                            </Field>
                        <SubmitButton>
                            Submit
                        </SubmitButton>
                        <ResetButton>
                            Reset
                        </ResetButton>
                    </div>
                ) }
            </Formularity>
        </div>
    );
};
Clone this wiki locally