Can anyone help me on this react issue ,please?

[YashKumar]

Please let me know why this function throws me “unique key prop Error”.

//Error

// react-jsx-dev-runtime.development.js:87 Warning: Each child in a list should have a unique “key” prop.

// Check the render method of Hello. See https://reactjs.org/link/warning-keys for more information.
// at Hello
// at App

import React from 'react'
import data from './data'
const Hello = () => {
    console.log(data)
    return (
        <>
            {
                data.map((item) => {
                    return (<>
                        <div key={item.id}>  
                            {item.title}
                        </div>
                    </>)
                })
            }
        </>)
}

export default Hello

[sangeet]

Instead of using <>....</> you can use <React.Fragment>...</React.Fragment>
You have add key param to div after fragment so you have to remove it from there and assign it to the fragment directly. eg. <React.Fragment key={item.id}>