Give Sibling Elements a Unique Key Attribute

by Allie Yu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Babel + JSX

const frontEndFrameworks = [
  'React',
  'Angular',
  'Ember',
  'Knockout',
  'Backbone',
  'Vue'
];

function Frameworks () {
	const renderFrameworks = frontEndFrameworks.map((item) => 
  	<li key = {item + 1}>{item}</li>)
  return (
  	<div>
  	  <h1>Front End Frameworks</h1>
      <ul>{renderFrameworks}</ul>
  	</div>
  )
}

ReactDOM.render(
	<Frameworks />,
  document.getElementById('root')
)