How to define keys in React JSX when use Map function

February 26, 2023

I have Arrays of objects and needs to loop through it and display it in the DOM. I able to do it with map function. But i getting the error due to lack of providing unique keys for it. Remember, it is not using the component to loop. I just want JSX to loop through it. So how can we provide keys in it. The code is as follows. Thanks in Advance!

import React from 'react';
import {Component1, Component2} from './Component';

const data=[
  {
    title: "Sample Title One",
    description: "Sample Description One"
  },{
    title: "Sample Title Two",
    description: "Sample Description Two"
  }]

function App(){
  return(
    <div className="data">
      {data.map((item)=>{
        return <div className="wrapper">
          <div className="title">{item.title}</div>
          <div className="description">{item.description}</div>
        </div> 
      })}
    </div>
  )
}
export default App;

I tried the following
<div className="wrapper" keys={item.title}>