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}>
I think it's
<div className="wrapper" key={item.title}>