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
Top comments (0)