[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,
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.
https://formik.org/docs/api/useField
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:
https://formik.org/docs/tutorial#schema-validation-with-yup
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</h3>
</div> <div className='stepper-item' data-kt-stepper-element='nav'>
<h3 className='stepper-title'>Account Info</h3>
</div>
<div className='stepper-item' data-kt-stepper-element='nav'>
<h3 className='stepper-title'>Business Info</h3>
</div>
<div className='stepper-item' data-kt-stepper-element='nav'>
<h3 className='stepper-title'>Billing Details</h3>
</div>
<div className='stepper-item' data-kt-stepper-element='nav'>
<h3 className='stepper-title'>Completed</h3>
</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>
