Hi,
I have an array and i am displaying data in a react select component with the isMulti
property. I am able to view my options well but onchange, the state is updated with a list of arrays like this :
[{
"id": 2540,
"category_id": 2,
"title": "Kpi 2",
"kpi_unit_of_measure": "%>",
"updated_by": 9,
"created_by": 9,
"date_created": "2022-01-25T21:00:00.000+0000",
"date_updated": "2022-01-25T21:00:00.000+0000",
"user_id": 9,
"account": "Expense",
"variance": "green",
"target": "1234",
"actualYTD": "6",
"plannedYTD": "6",
"rootCause": null,
"action": null,
"supportRequired": null,
"switchedTo": null,
"categories": {
"id": 2,
"description": "Customer"
}
}
]
Instead of this [1, 2]
My code :
<Controller
control={methods.control}
className="basic-single"
classNamePrefix="select"
styles={{ marginTop : '10px', marginBottom : '10px'}}
name="kpi_id"
render={({ value, ref }) => (
<Select
inputRef={ref}
options={kpis}
isMulti
className="basic-multi-select"
menuPortalTarget={document.body}
styles={{ menuPortal: base => ({ ...base, zIndex: 9999 }) }}
value={kpis.find(c => c.id === value)}
onChange={val => ( console.log("kpi select", val))}
getOptionLabel={kpis => kpis.title}
getOptionValue={kpis => kpis.id}
/>
)}
/>
```
My kpis :
```
"data": [
{
"id": 2540,
"category_id": 2,
"title": "Kpi 2",
"kpi_unit_of_measure": "%>",
"updated_by": 9,
"created_by": 9,
"date_created": "2022-01-25T21:00:00.000+0000",
"date_updated": "2022-01-25T21:00:00.000+0000",
"user_id": 9,
"account": "Expense",
"variance": "green",
"target": "1234",
"actualYTD": "6",
"plannedYTD": "6",
"rootCause": null,
"action": null,
"supportRequired": null,
"switchedTo": null,
"categories": {
"id": 2,
"description": "Customer"
}
},
{
"id": 2311,
"category_id": 2,
"title": "Test the app",
"kpi_unit_of_measure": "%>",
"updated_by": 9,
"created_by": 9,
"date_created": "2022-01-24T21:00:00.000+0000",
"date_updated": "2022-01-25T21:00:00.000+0000",
"user_id": 9,
"account": "Revenue",
"variance": "red",
"target": "140",
"actualYTD": "68",
"plannedYTD": "90",
"rootCause": null,
"action": null,
"supportRequired": null,
"switchedTo": null,
"categories": {
"id": 2,
"description": "Customer"
}
}
]
I have tried accessing the objects id from the new state using a custom method but i am getting errors. Any advise or tips on how to obtain the value id from react select multiple will be appreciated. Thanks