How Downshift onSelect get MenuItem key or show specific fields as MenuItem label?

I’m trying to use the example from material-ui https://material-ui-next.com/demos/autocomplete/

In renderSuggestion function, I have menu item with key, how can I get the key with onSelect function?

  renderSuggestion({
    suggestion,
    index,
    itemProps,
    highlightedIndex,
    selectedItem
  }) {
    const isHighlighted = highlightedIndex === index;
    const isSelected = (selectedItem === null);
    return (
      <MenuItem
        {...itemProps}
        key={suggestion.id}
        selected={isHighlighted}
        component="div"
        style={{
          fontWeight: isSelected ? 500 : 400
        }}
      >
        {suggestion.firstName} {suggestion.lastName}
      </MenuItem>
    );
  }

        <Downshift onSelect={selection => {
          console.log(selection);
            this.setState({selectedStudentId: selection});
          }}>
          {({
            getInputProps,
            getItemProps,
            isOpen,
            inputValue,
            selectedItem,
            highlightedIndex
          }) => (
            <div>
            <Grid container spacing={40}>
              <Grid item xs={4}>
                          <div>
              {this.renderInput({
                fullWidth: true,
                classes,
                InputProps: getInputProps({
                  placeholder: "Type student name",
                  id: "integration-downshift-simple"
                })
              })}
              {isOpen ? (
                <Paper className={classes.paper} square>
                  {this.getSuggestions(inputValue).map((suggestion, index) =>
                    this.renderSuggestion({
                      suggestion,
                      index,
                      itemProps: getItemProps({
                        item: suggestion.firstName + " " + suggestion.lastName
                      }),
                      highlightedIndex,
                      selectedItem
                    })
                  )}
                </Paper>
              ) : null}
            </div>
              </Grid>
              <Grid item xs={4}>
                <Button variant="raised" color="primary" onClick={this.searchStudent}>
                  Search
                  <Search />
                </Button>
              </Grid>
            </Grid>
            </div>
          )}
        </Downshift>

If I change to below:

itemProps: getItemProps({
    item: suggestion
}),

When I select the object, it will show as: [object Object].

[donysukardi]

@TommyQu You need to pass itemToString prop to Downshift component to tell it how to render the selected item, e.g.

<Downshift
   ...
   itemToString={item => `${item.firstName} ${item.lastName}`}
/>

@kentcdodds we should think of a way to better highlight the importance of itemToString. Seems like a lot of people miss it from the current documentation.

[kentcdodds]

I’m not sure what to do about this one so I’m going to go ahead and close it. Someone can open a PR to improve the docs if they like.