I am using Ant-design in my project, So i need to add tags to my form for the users to select it, until now i was adding tags which allows only one option to select and show it to user but now i want to move to multi select feature.
Here is the code below for Single select feature.
Parent COmponent
import CheckableAntTag from "../../../../../../components/Tags";
export default function FormSection() {
const mortgageData = [
"Porque me foi recomendado",
"Quero comparar com o seguro que tenho atualmente",
"Para estar protegido(a) caso algo aconteça",
"O meu seguro vai renovar-se em breve",
];
const formik = useFormik({
enableReinitialize: true,
initialValues: {
insuranceMotive: null,
},
onSubmit: (values) => {
console.log(values);
},
validationSchema: validationSchemaSectionOne, //schema which validates the input with the help of Yup
});
return (
<div className="firstSection">
<form onSubmit={formik.handleSubmit}>
<div className="selectable-tags-mortgage">
{mortgageData.map((tag, index) => (
<CheckableAntTag //Reusale component to select tags on click
tag={tag}
key={index}
setValue={(val) => formik.setFieldValue("insuranceMotive", val)}
value={formik.values.insuranceMotive}
/>
))}
</div>
{formik.errors.insuranceMotive && formik.touched.insuranceMotive && (
<div className="formik-errors">{formik.errors.insuranceMotive}</div>
)}
</form>
</div>
);
}
Tag Component
export default function CheckableAntTag({ tag, value, setValue }) {
const { CheckableTag } = Tag
return (
<CheckableTag
style={{
backgroundColor: tag === value ? '#AACECD' : 'white'
}}
className="selectable-ant-tags"
key={tag}
checked={tag === value}
onChange={() => setValue(tag)}>
{tag}
</CheckableTag>
)
}
This works fine and show user selected tag by highlighting it, but i am stuck on enabling multi select feature here, along with formik
Hope someone helps me out, thanks !