How to use Formik to update multiple forms in React JS?

Wahidul Alam — Sat, 10 Sep 2022 14:32:42 +0000

I am using Formik along with Yup to handle form submission with validation. I have successfully applied in create form. However, in update form I am facing issues:

I have multiple update forms in accordion as the picture below and when I click submit button it applies in all update forms of the accordion.
It is not capturing the field default value when the form is being submitted.

Formik Codes:

const updateForm = useFormik({
    initialValues: {
        name: '',
        category: '',
        image: ''
    },
    validationSchema: yup.object({
        name: yup.string().min(2, "Product name should be at least 2 characters").required('Product name is required'),
        category: yup.string().required('Product category is required'),
        image: yup.string().required('Product image is required'),
    }),
    onSubmit: (values) => {
        // updateProduct(values)
        console.log(values)
    }
})

JSX: Multiple Product List with map which generates multiple forms

<div className="col-lg-7">
    <div className="card-style mb-30">
        <p className="text-sm mb-20">
            Total products: {products.length}
        </p>
        {
            products.length > 0 &&
            products.map((product) => (
                <div key={product.id} className="accordion mb-2" id="accordionExample">
                    <div className="accordion-item">
                        <div className="accordion-header p-3" id="headingOne">
                            <img src={require(`../../../../public/bvend/products/${product.image}`)} className="image-in-list" alt={product.name} />
                            <span className="ms-3">{product.name}</span>
                            <span className="ms-3">{product.category}</span>
                            <span className="float-end">
                                <button onClick={() => showEditPanel(product.id)} className='p-0 text-primary btn-link btn'>
                                    <i className="lni lni-pencil-alt"></i>
                                </button>
                                <button onClick={() => showRemovePanel(product.id)} className='p-0 ms-2 text-danger btn-link btn'>
                                    <i className="lni lni-trash-can"></i>
                                </button>
                            </span>
                        </div>
                        <div id='edit-panel' className={editPanel === product.id ? 'd-block' : 'd-none'}>
                            <div className="accordion-body bg-light">
                                <Form noValidate onSubmit={updateForm.handleSubmit}>
                                    <Form.Group controlId="validationCustom01" className="input-style-1">
                                        <Form.Control
                                            className={updateForm.errors.name && "is-invalid"}
                                            name="name"
                                            required
                                            type="text"
                                            placeholder="Enter product name"
                                            onChange={updateForm.handleChange}
                                            onBlur={updateForm.handleBlur}
                                            value={product.name}
                                        />
                                        <Form.Control.Feedback type="invalid">
                                            {updateForm.errors.name && updateForm.errors.name}
                                        </Form.Control.Feedback>
                                    </Form.Group>
                                    <Form.Group controlId="validationCustom02" className="select-style-2">
                                        <CategorySelect
                                            formik={updateForm}
                                            filterOption={product.category} />
                                        <Form.Control.Feedback type="invalid">
                                            {updateForm.errors.category && updateForm.errors.category}
                                        </Form.Control.Feedback>
                                    </Form.Group>
                                    <Form.Group controlId="formFileLg" className="input-style-1">
                                        <Form.Control
                                            className={updateForm.errors.image && "is-invalid"}
                                            name="image"
                                            required
                                            type="file"
                                            placeholder="Choose product image"
                                            onChange={updateForm.handleChange}
                                            onBlur={updateForm.handleBlur}
                                        />
                                        <Form.Control.Feedback type="invalid">
                                            {updateForm.errors.name && updateForm.errors.name}
                                        </Form.Control.Feedback>
                                    </Form.Group>
                                    <div className="d-grid gap-2 d-md-flex justify-content-md-end">
                                        <Button type="submit" className="main-btn primary-btn btn-hover btn-sm">Update Product</Button>
                                    </div>
                                </Form>
                            </div>
                        </div>
                        <div id='remove-panel' className={removePanel === product.id ? 'd-block' : 'd-none'}>
                            <div className="accordion-body bg-light">
                                <h3>Are you sure to remove?</h3>
                                <div className="d-grid gap-2 d-md-flex justify-content-md-end mt-4">
                                    <button onClick={() => removeProduct(product.id)} className="main-btn danger-btn btn-hover btn-sm">Move to trash</button>
                                    <button onClick={() => setRemovePanel(null)} className="main-btn light-btn btn-hover btn-sm">Cancel</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            ))
        }
    </div>
</div>

stackoverflow: https://stackoverflow.com/questions/73663057/how-to-use-formik-to-update-multiple-forms-in-react-js

help #reactjs #formik #yup

DEV Community: Wahidul Alam

How to use Formik to update multiple forms in React JS?

help #reactjs #formik #yup