[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' }
]


<div className='text-danger mt-2'>

</div>

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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>

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(