React Select Multiple Onchange setstate with ids

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

What library are you using for those components. Do you have a repo for this?

import { useForm, Controller } from 'react-hook-form';

import Select from "react-select";

These are the libraries im using

Can you provide a link to a repo so we don’t have to try to set up the project ourselves?

I have set up a sandbox here , it contains the select and versions of the dependancies.

I’m sorry but that looks like an empty sandbox to me.

I have updated the sandbox

1 Like

It’s still not entirely clear to me what you want. Is this getting you closer?

            onChange={(val) => {
              console.log("kpi select", val)
              setKpiId(val.map(kpi => kpi.id))
            }}

I’m not clear what you want those numbers to represent.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.