[SOLVED] Pass only a key into state not all object

Pass only a key into state not all object

i try pick only a id and set State for classId, but i got a object, how can we solve it ?

<Typeahead
    clearButton
    id="basic-typeahead-multiple"
    multiple
    onChange={(id) => setClassId(id)}
    labelKey="name"
    valueKey="id"
    options={[
        { id: 1, name: "10A" },
        { id: 2, name: "10B" },
        { id: 3, name: "10C" },
    ]}
    placeholder="select class"
    selected={classId}
/>;

I think my state will be classId = [ 1, 2, 3 ] but i got classId = [ { id: 1, name: "10A" }, { id: 2, name: "10B" }, { id: 3, name: "10C" } ]

Thanks you so much.

Solution

Neither of the answers will work correctly with multiple, since both simply select the first item and will not return, eg: [1, 2, 3] as specified in the question. Instead, try:

<Typeahead
  ...
  onChange={(selected) => {
    const ids = selected.map(s => s.id);
    setClassId(ids);
  }}
/>

Note that setting selected={classId} will not work correctly, since none of the items will match the items passed to options.