How to set default value of react-select using formik fieldarray? - reactjs

Question

I am using formik and fieldarray for creating dynamic form and I am using react-select. I am working on edit of items. On Edit if there exists previous values then those values must be shown and those values can be changed, but somehow I am unable to create. Here's my code.
here is the code for initial value of formik
const initialOrderItemData = orderItems && orderItems.map((orderItem) => {
return {
itemId: orderItem.itemId,
quantity: orderItem.quantity,
}
});
const initialOrderInfo = {
orderedItemDataArray: initialOrderItemData,
};
This is my form
<Formik
initialValues={initialOrderInfo}
onSubmit={handleSubmit}
validationSchema={HotelOrderSchema}
>
{({ errors, setFieldValue, touched, values, name, }) => (
<Form>
<Row>
<Table size="sm" hover>
<thead>
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<FieldArray
name="orderedItemDataArray"
render={({ remove, push }) => (
<>
{values.orderedItemDataArray.length > 0 &&
values.orderedItemDataArray.map(
(order, index) => (
<tr key={index}>
<td>
<Select
as="select"
name={`orderedItemDataArray.${index}.itemId`}
options={menuOptions}
placeholder="Type"
// value={selectedItems(order.itemId)}
value={menuOptions.find(op => {
return op.value === order.itemId
})}
/>
</td>
<td>
<Field
type="number"
className="form-control"
name={`orderedItemDataArray.${index}.quantity`}
min="0"
placeholder="Quantity"
/>
</td>
<td>
<ButtonGroup>
{values.orderedItemDataArray
.length !== 1 && (
<Button
color="primary"
size="sm"
onClick={() => remove(index)}
>
-
</Button>
)}
{values.orderedItemDataArray
.length -
1 ===
index && (
<Button
color="secondary"
size="sm"
onClick={() =>
push({
itemId: '',
quantity: '',
})
}
>
+
</Button>
)}
</ButtonGroup>
</td>
</tr>
)
)}
</>
)}
/>
</tbody>
</Table>
</Row>
</Form>
</Formik>
with this code I am able to get the value but I am unable to change the value and set the new value.

Answer 1

In your select component you must include an onChange event like so
//set a state for the changed selected option
const [selectedOption,setSelectedOption] = useState()
<Select
as="select"
name={`orderedItemDataArray.${index}.itemId`}
options={menuOptions}
placeholder="Type"
// value={selectedItems(order.itemId)}
value={menuOptions.find(op => {
return op.value === order.itemId
onChange={(e) => {
setSelectedOption(e.target.value)
}}
})}
/>
//then if you wanna access the selected option you can use the useState value.
<p>{selectedOption}</p>