if i call all discount price using map method. it perfectly work but i see in console and like this error are found. how to fix it
<div className="priceCal flex flex-col items-center">
<p style={{ fontSize: '1.5em' }} className='font-medium pt-3'>Total items: </p>
{
data.map((v, i)=>{
return <p className='font-bold text-xl'>Rs. {v.DiscountPrice}</p>
})
}
</div>
react-jsx-dev-runtime.development.js:117 Warning: Each child in a list should have a unique "key" prop.
Check the render method of `Cart`. See https://reactjs.org/link/warning-keys for more information.
at p
at Cart (http://localhost:3000/static/js/bundle.js:3393:74)
at Routes (http://localhost:3000/static/js/bundle.js:63733:5)
at RouterMenu
at App (http://localhost:3000/static/js/bundle.js:140:81)
at Router (http://localhost:3000/static/js/bundle.js:63666:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:63146:5)
You need to add a key to the parent element of the return like this
return <p className='font-bold text-xl' key={i}>Rs. {v.DiscountPrice}</p>
But it's better to use a unique property of the object like key={v.id} if id exists
You are looping over
data.map((v, i)=>{
return <p className='font-bold text-xl'>Rs. {v.DiscountPrice}</p>
})
Just add a key to the return JSX
data.map((v, i)=>{
return <p key={i} className='font-bold text-xl'>Rs. {v.DiscountPrice}</p>
})
If you have a unique identifier in the v object, use that