[Metronic React] implement react-select to Wizard
Hi,
I have a problem to implement react-select component to Stepper.
I always get initials values, not these selected from Select
my code:
interface:
export interface ICreateBot {
...
selectPairs: { value: string, label: string }
...
}
inits:
const inits: ICreateBot = {
...
selectPairs: { value: '', label: '' },
...
}
YUP:
const createSchemas = [
...
Yup.object({
selectPairs: Yup.object().shape({
value: Yup.string().required("Required"),
label: Yup.string().required("Required"),
}),
})
]
Select:
const pairsData = [
{ value: 'BTCU/USDT', label: 'BTCU/USDT' },
{ value: 'ETH/USDT', label: 'ETH/USDT' },
{ value: 'LTC/USDT', label: 'LTC/USDT' }
]
<Select
options={pairsData}
defaultValue={pairsData[0]}
name='selectPairs'
/>
<div className='text-danger mt-2'>
<ErrorMessage name='selectPairs' />
</div>
Replies (3)
Hi,
I looked for useFild() and have no luck to implement it.
It will be great if you make some basic example with react-select in your stepper.
Thx!
Hi,
To use a custom field you will need to do some refactoring.
You can refer to the useFormik() example in official doc:
Or follow steps below:
1) Create your array with yup validation schemas:
const validationSchemas = [
Yup.object({
firstStep: Yup.string().required().label("First step field"),
}),
Yup.object({
secondStep: Yup.string().required().label("Second step field"),
}),
Yup.object({
thirdStep: Yup.string().required().label("Third step field")
}),
Yup.object({
forthStep: Yup.string().required().label("Forth step filed"),
}),
Yup.object({
firthStep: Yup.string().required().label("Firth step field"),
}),
]2)Then create formik instance using useFormik hook and set initial values, validation schema and submit function.
const formik = useFormik({
initialValues: {
firstStep: "",
secondStep: "",
thirdStep: "",
fourthStep: "",
fifthStep: "",
},
validationSchema: validationSchemas,
onSubmit: (values) => {
if (!stepper.current) {
return
}
setSubmitButton(stepper.current.currentStepIndex === stepper.current.totatStepsNumber! - 1)
setCurrentSchema(createAccountSchemas[stepper.current.currentStepIndex])
if (stepper.current.currentStepIndex !== stepper.current.totatStepsNumber) {
stepper.current.goNext()
} else {
stepper.current.goto(1)
}
},
});3) Then instead of the Formik component forms, you need to add a classic HTML form and then connect a form event with your formik instance events
<div
ref={stepperRef}
className="stepper stepper-links d-flex flex-column pt-15"
id="kt_create_account_stepper"
>
<div className="stepper-nav mb-5">
<div className="stepper-item current" data-kt-stepper-element="nav">
<h3 className="stepper-title">Account Type
</div>
<div className="stepper-item" data-kt-stepper-element="nav">
<h3 className="stepper-title">Account Info
</div>
<div className="stepper-item" data-kt-stepper-element="nav">
<h3 className="stepper-title">Business Info
</div>
<div className="stepper-item" data-kt-stepper-element="nav">
<h3 className="stepper-title">Billing Details
</div>
<div className="stepper-item" data-kt-stepper-element="nav">
<h3 className="stepper-title">Completed
</div>
</div>
<form className="mx-auto mw-600px w-100 pt-15 pb-10" onSubmit={formik.handleSubmit} id="kt_create_account_form">
<div className="current" data-kt-stepper-element="content">
<input type="text" id="firstStep" name="firstStep" placeholder="firts-step" onChange={formik.handleChange} onBlur={formik.handleBlur} value={formik.values.firstStep} />
{formik.touched.firstStep && formik.errors.firstStep ? (<div>{formik.errors.firstStep}</div>) : null}
</div>
<div data-kt-stepper-element="content">
<input type="text" id="secondStep" name="secondStep" placeholder="secod-step" onChange={formik.handleChange} onBlur={formik.handleBlur} value={formik.values.secondStep} />
{formik.touched.secondStep && formik.errors.secondStep ? (<div>{formik.errors.secondStep}</div>) : null}
</div>
<div data-kt-stepper-element="content">
<input type="text" id="thirdStep" name="thirdStep" placeholder="third-step" onChange={formik.handleChange} onBlur={formik.handleBlur} value={formik.values.thirdStep} />
{formik.touched.thirdStep && formik.errors.thirdStep ? (<div>{formik.errors.thirdStep}</div>) : null}
</div>
<div data-kt-stepper-element="content">
<input type="text" id="fourthStep" name="fourthStep" placeholder="forth-step" onChange={formik.handleChange} onBlur={formik.handleBlur} value={formik.values.fourthStep}/>
{formik.touched.fourthStep && formik.errors.fourthStep ? (<div>{formik.errors.fourthStep}</div>) : null}
</div>
<div data-kt-stepper-element="content">
<input type="text" id="fifthStep" name="fifthStep" placeholder="firth-step" onChange={formik.handleChange} onBlur={formik.handleBlur} value={formik.values.firstStep} />
{formik.touched.fifthStep && formik.errors.fifthStep ? (<div>{formik.errors.fifthStep}</div>) : null}
</div>
<div className="d-flex flex-stack pt-15">
<div className="mr-2">
<button
onClick={prevStep}
type="button"
className="btn btn-lg btn-light-primary me-3"
data-kt-stepper-action="previous"
>
<KTSVG
path="/media/icons/duotune/arrows/arr063.svg"
className="svg-icon-4 me-1"
/>
Back
</button>
</div>
<div>
<button type="submit" className="btn btn-lg btn-primary me-3">
<span className="indicator-label">
{!isSubmitButton && "Continue"}
{isSubmitButton && "Submit"}
<KTSVG
path="/media/icons/duotune/arrows/arr064.svg"
className="svg-icon-3 ms-2 me-0"
/>
</span>
</button>
</div>
</div>
</form>
</div>Hi,
If you are using a demo provided in the theme, then the problem is because you are using a custom field, instead of the Formik field component.
To use custom fields in a Formik you need to hook up them with useField() hook.
Please read more about Formik useField() hook in official Formik doc.
