How to load data into dynamically created forms in a page with multiple forms?

[gidsdangil]

Hi All, anyone ever tried creating a form page created dynamically? I am having trouble trying to set initial values for when I want to load data into my forms. I am having trouble because I have multiple forms in one page and not sure how to setup initial values for it.

I have a code sample here in codesandbox: https://codesandbox.io/s/nice-snowflake-nw79k

I basically want to load the data I have in ./mock/data.json into my form but is unsuccessful so far.

[maddhruv]

Hey @gidsdangil there can be multiple ways of doing this - loading some data (async) and then rendering the form. These are some I would consider if I fall into such a scenario

1. fetch data and render

// load the data async and set a state to track that the data has been loaded 
fetch('data.json').then(() => setHasData(true))

{
    data && <RenderForm data={data} />
}

// RenderForm
const form = useFormik({
    initialValues: props.data
})

2. if you already know about the structure of the form (which I think you do) and have some default data to show to the user

// initialize the form with the default initialValues
const form = useFormik({
    initialValues
})

// fetch the async data and update the values in the form
// https://formik.org/docs/api/formik#setvalues-fields-reactsetstateaction-field-string-any--shouldvalidate-boolean--void
fetch('data.json').then(() => setValues(data))

hope this answers your question 😄

[GustavoJava]

nnoooo

[GustavoJava]

const TextFiedlWrapper = ({
name,
...otherProps }) => {

const [field, meta] = useField(name);
const { setFieldValue } = useFormikContext();

const handleChange = (evt) => {
const { value } = evt.target;
setFieldValue(name, value, false);
};

const configTextfield = {
...field,
...otherProps,
fullWidth: true,
variant: "standard",
onChange: handleChange
};

if (meta && meta.touched && meta.error) {
configTextfield.error = true;
configTextfield.helperText = meta.error;
}

return <TextField {...configTextfield} />;
};

export default TextFiedlWrapper;

const INITIAL_FORM_STATE = {
initialValues: {
id: 0,
nomemorador: "",
email: "",
cpf: "",
suite: {
idsuite: 0,
}
},

---

const formik = useFormik({
    ...INITIAL_FORM_STATE
   

});

---

<Formik
enableReinitialize={true}
initialValues={{
...INITIAL_FORM_STATE
}}
validationSchema={FORM_VALIDATION}
onSubmit={(values) => {
(isAddMorador ? addMorador(values) : updateMorador(values));
}}
>

                                <DialogTitle
                                    id="form-dialog-title">
                                    <div>
                                        Registrar Moradores
                                        <CancelIcon
                                            className={classes.closeIcon}
                                            onClick={() => handleCloseDlgMorador()} />
                                    </div>
                                </DialogTitle>

                                <DialogContent>

                                    <Form>
                                        <Grid container spacing={2}>

                                            <Grid item xs={12}>
                                                <TextField 
                                                name="nomemorador" 
                                                label="Nome" />
                                            </Grid>

---

<MaterialTable
title="Moradores"
icons={tableIcons}
columns={[
{
title: "Id",
field: "idmorador"
},
{

                                    title: "Nome",
                                    field: "nomemorador"
                                },
                                { title: "Email", field: "email" },
                                { title: "CPF", field: "cpf" },
                                { title: "Nº Suite", field: "suite.numQuarto" }
                            ]}
                            data={moradores}
                            actions={[
                                {
                                    icon: () => <EditIcon />,
                                    tooltip: "Editar Morador",
                                    onClick: (event, moradorData) => editMorador(moradorData)
                                },

---

const editMorador = (morador) => {
formik.setValues({ ...morador }, true);
window.alert(JSON.stringify(morador));
setIsAddMorador(false);
setOpenDlgMorador(true);
};