Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

[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>


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,

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
</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.
https://formik.org/docs/api/useField


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  :(