Passing array of objects to useHook(downshift-js) creates error

Question

I followed the basic-usage in downshift-examples, but changed the array of items to display in the dropdown from starwars (array of strings) to an array of objects (e.g. Id: 1, Description:'item') in shared.js.

I also logged a couple of things and put them inline in the code below preceded by "==>".

When I launch the application, the dropdown appears. But the instant I click the dropdown arrow on the right side of the dropdown, the following error displays.

Uncaught Error: Objects are not valid as a React child (found: object with keys {Id, Description}). If you meant to render a collection of children, use an array instead.

Any ideas on what I'm doing wrong?

import { items, menuStyles, comboboxStyles, itemToString } from "../../shared";

function DropdownCombobox() {
  const [inputItems, setInputItems] = useState(items);
  console.log(items);      // ==> Array(127)
  console.log(itemToString); // ==> i => i ? i.Description : ""
  console.log(items[1]); // ==> {Id: 38, Description: "001 - RAB"}
  const {
    isOpen,
    getToggleButtonProps,
    getLabelProps,
    getMenuProps,
    getInputProps,
    getComboboxProps,
    highlightedIndex,
    getItemProps,
  } = useCombobox({
    items: inputItems,
    itemToString,
    onInputValueChange: ({ inputValue }) => {
      setInputItems(
        items.filter((item) =>
          itemToString(item).toLowerCase().startsWith(inputValue.toLowerCase())
        )
      );
    },
  });```

score 0 · Answer 1 · answered Nov 13 '20 at 21:50

The list of items for an array of objects ({Id:0, Description:'abc'} should be

<ul {...getMenuProps()} style={menuStyles}>
  {isOpen &&
    inputItems.map((item, index) => (
      <li
        style={highlightedIndex === index ? { backgroundColor: '#bde4ff' } : {}}
        key={item.Id}
        {...getItemProps({ item, index })}
      >
        {item.Description}
      </li>
    ))}
</ul>

And the following handler should be changed

onInputValueChange: ({ inputValue }) => {
  setInputItems(
    items.filter((item) => item.Description.toLowerCase().startsWith(inputValue.toLowerCase()))
  );
},

Passing array of objects to useHook(downshift-js) creates error

1 Answers1