Keys warning in the console

Hi Guys,

I am getting the following error in the console:

index.js:2178 Warning: Each child in an array or iterator should have a unique "key" prop.

Check the render method of `InfiniteScroll`. It was passed a child from . See https://fb.me/react-warning-keys for more information.

I have no idea why. Any ideas?

return (
      //Implement pagination using infinite scroll
      <div {...s('wrapper')}>
        <InfiniteScroll
          pageStart={0}
          loadMore={this.loadMoreRestaurants}
          hasMore={loadmore}
          loader={<LoadingSpinner />}
        >
          <div {...s('restaurants')}>
            {restaurantList.map(({ restaurant }) => (
              <RestaurantCard key={restaurant.id} restaurant={restaurant} />
            ))}
          </div>
        </InfiniteScroll>
      </div>
    );

[danbovey]

You need to add a unique key prop onto the loader.

return (
      //Implement pagination using infinite scroll
      <div {...s('wrapper')}>
        <InfiniteScroll
          pageStart={0}
          loadMore={this.loadMoreRestaurants}
          hasMore={loadmore}
          loader={<LoadingSpinner key={0} />} // <-- Added key={0}
        >
          <div {...s('restaurants')}>
            {restaurantList.map(({ restaurant }) => (
              <RestaurantCard key={restaurant.id} restaurant={restaurant} />
            ))}
          </div>
        </InfiniteScroll>
      </div>
    );

[luq10]

@danbovey Can you say why this is needed?