CODEWITHSUNDEEP
reactjsformsformik
user101289
user101289

Reputation: 10422

using formik in react subcomponent

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?

Upvotes: 1

Views: 637

Answers (1)

user101289
user101289

Reputation: 10422

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.

Upvotes: 1

Related Questions