using formik in react subcomponent

Question

I'm using formik for a simple form, but I have several multiselect inputs that are populated from remote data sources, so I've made them into subcomponents. The basic form looks something like

<div className="form-group">
    <label htmlFor="priority">Priority</label>
    <select
        id="priority"
        onChange={formik.handleChange}
        className="form-control"
        value={formik.values.priority}
        defaultValue="Normal"
        disabled={isDisabled}
    >
        <option>Urgent</option>
        <option>High</option>
        <option>Normal</option>
        <option>Low</option>
    </select>
</div>
<div className="form-group">
    <label htmlFor="myselect">MySelect List</label>
    <MySelect />
</div>

Can I pass formik as a prop to the subcomponent, or would I pass the OnChange method and the value as props, or is there a different way that you handle this in the main form object?

user101289 · Accepted Answer · 2020-09-22 16:42:54Z

1

The solution seems to be simply passing the formik.value and formik.handleChange as props to the subcomponent and then use them as normal. Note that the id of the input in the subcomponent (a select in this case) has to be the same as the formik.values.name or the handleChange won't work.

answered Sep 22, 2020 at 16:42

user101289

10.5k19 gold badges98 silver badges165 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

using formik in react subcomponent

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related