Ravenous Part 4: why <Business /> needs key parameter

I am trying to understand the reason behind key parameter that we pass to the component in ravenous part 4 step 21.

<div className="BusinessList">
                {
                    this.props.businesses.map(
                        business => {
                            return <Business business={business} key={business.id}/>;
                        }
                    )
                }

I have tried without it:

<div className="BusinessList">
                {
                    this.props.businesses.map(
                        business => {
                            return <Business business={business}/>;
                        }
                    )
                }

And obtained visibly the same result. What is the idea behind passing this key. Is it used anywhere?

Here is the link to that exercise:
(https://www.codecademy.com/paths/web-development/tracks/front-end-applications-with-react/modules/172fedc63e7c8dd8ccbebeaf3a122fa4/projects/interacting-with-yelp-api)

React uses keys as way to number/label list items - if you don’t pass in a key prop, you will get a warning in the console

1 Like