Title: Where to indicate the key property when mapping an array in React?
Tags: arrays;reactjs;twitter-bootstrap
Question: I am using bootstrap in one of our projects and there's this page where in I need to map over an array which will render a list of <InnerComponent /&gt; in a grid of 3 columns. However, I needed to include the bootstrap column  for each array child that the map function returns. And since <div&gt; is the direct child, then I have to put they 'key' property into it like so:
somearray.map((item, index) =&gt; {
return (
<div
className="col-lg-4 col-md-6 col-sm-12"
key={item.id}
&gt;
<InnerComponent /&gt;
</div&gt;
);
Is this valid? Or should the key be always added as a component prop?
Comment: sounds like you don't really know what key is for. read this page from the official docs https://reactjs.org/docs/lists-and-keys.html

Comment: What you are doing is correct you just make sure key.id is unique otherwise you will get only first element



{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 0, 'CommentCount': 2, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2018:00:09/06/18', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<arrays><reactjs><twitter-bootstrap>', 'Title': 'Where to indicate the key property when mapping an array in React?', 'ViewCount': 81, 'id': 52195813, 'user_AboutMe': "<p>I'm a front-end developer.</p>\n", 'user_AccountId': 241064.0, 'user_DisplayName': 'catandmouse', 'user_Reputation': 10697.0, 'user_Views': 871.0, 'user_id': 511659.0}}