Reputation: 10422
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
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