How to make Semantic UI react Search use id instead of title as key

Question

I am using Semantic UI react's Search module.

The user is supposed to be able to search for companies name.

Semantic UI react seems to use the title prop as a key when rendering the array of results. Some companies have the same name (located at different locations) but then React throws an error because of duplicate keys.

How can I make Semantic UI React use an Id or something else then the title as key when rendering the results?

const resultRenderer = ({ title, id }) => {
  console.log(id);
  return <div key={id}>{title}</div>;
};

class SearchBox extends React.Component {
  componentWillMount() {
    this.timer = null;
  }

  handleSearchChange = (e, { value }) => {
    clearTimeout(this.timer);

    const { updateSearchValue } = this.props;

    this.timer = setTimeout(() => {
      updateSearchValue(value);
      this.calculateSuggestions(value);
    }, 500);
  };

  calculateSuggestions = value => {
    const { resetSearch, fetchingSuggestions, getResults } = this.props;
    const { fetched } = this.props.search;
    if (value.length === 0) {
      resetSearch();
    } else if (value.length === 1 && !fetched) {
      getResults();
    } else if (value.length === 1 && fetched) {
      fetchingSuggestions();
    } else {
      fetchingSuggestions();
    }
  };

  handleResultSelect = (e, { result }) => {};

  render() {
    const { isLoading, suggestions, value } = this.props.search;
    return (
      <Grid>
        <Grid.Column width={8}>
          <Search
            loading={isLoading}
            onSearchChange={this.handleSearchChange}
            results={suggestions}
            value={value}
            resultRenderer={resultRenderer}
          />
        </Grid.Column>
      </Grid>
    );
  }
}

index.js:2177 Warning: Encountered two children with the same key, Dynjandi. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version. in div (created by SearchResults) in SearchResults (created by Search) in div (created by Search) in Search (at SearchBox.js:50) in div (created by GridColumn) in GridColumn (at SearchBox.js:49) in div (created by Grid) in Grid (at SearchBox.js:48) in SearchBox (created by Connect(SearchBox)) in Connect(SearchBox) (at App.js:10) in div (created by Container) in Container (at App.js:9) in App (at index.js:24) in Provider (at index.js:23)

Answer 1

This error can resolved by adding a property key to each item in the suggestions array that is passed to the results prop of <Search />. If id is a unique property on your suggestions array items, you can use something like Array.prototype.map() to add property key to each item and set the value to that of the respective id for that item.

The below example is using the Spread operator to merge each suggestion with a new key property targeting id of each suggestion.

const newSuggestions = suggestions.map(s => ({ ...s, key: s.id }));

Here is a link to a functioning example with a method handling search change events using map() to add a key property to each result that passed into <Search /> prop results: