[SelectField] - Bound array of objects results in an invalid spread on ListItem

[c06e]

I have an array of objects that I have bound to the SelectField and have specified an ItemLabel and ItemValue. The problem is, on line 952 in the _reduceItems function of SelectField.js, it's spreading all of the remaining properties of the item to the ListItem component, resulting in the following error. Any reason to maintain the prop spread on the ListItem?

Warning: React does not recognize the `[PropertyOfTheObject]` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `[PropertyOfTheObject]` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in div (created by AccessibleFakeButton)
    in AccessibleFakeButton (created by withInk(AccessibleFakeButton))
    in withInk(AccessibleFakeButton) (created by ListItem)
    in li (created by ListItem)
    in ListItem (created by SelectField)
    in ul (created by List)
    in List (created by Layover)
    in CSSTransitionGroupChild (created by TransitionGroup)
    in div (created by TransitionGroup)
    in TransitionGroup (created by CSSTransitionGroup)
    in CSSTransitionGroup (created by Layover)
    in Layover (created by Menu)
    in Menu (created by SelectField)

[mlaursen]

The main reason is a bit of laziness but it's also so that you can add a lot of customizability to the items. When you use an object, it can allow you to create a pretty complicated item like:

{
  label: 'This is the item label',
  value: 'value',
  leftIcon: <Checkbox id="some-id" checked={isChecked('some-id')} name="multi-select" onChange={this.handleMultiSelect} />,
  secondaryText: 'Some additional context',
  ... any other props ...
}

and since the ListItem is still using an old component paradigm, I can't safely remove all keys that can't be provided to the ListItem since this is also valid:

{
  label: 'This is the item label',
  value: 'value',
  component: CustomItem,
  customProp1: 'something',
  customProp2: 'something else',
  ... other props ...
}

[c06e]

I guess I understand that. Do you have a suggestion to compress the warnings in the console or is there a different way I should be constructing my SelectField implementation? I think if I put a loop within the SelectField and return the items as children, I get an entirely different error, so not sure what's the best approach.

[mlaursen]

Sorry, took me awhile to respond. You can always try to use the deleteKeys prop to remove those additional keys that are not needed.