React Hooks onClick in list item

Question

I have a list and I wanna set 'onClick' function which click to each item then show detail of item. But my function returned undefine object I used react hooks and functional component

here is my code

 var listItem = data.map((i, index) => (<Item key={index}
    isRead={i['isRead']}
    image={i['image']}
    content={i['content']}
    time={i['time']}
    onClick={(i) => console.log('Click to',i.content)}
></Item>));
return (
    <div className="Conversation">
        <div className="ScrollDiv">
            {listItem}
        </div>

    </div>
);

result here

Answer 1

The i parameter in the callback function represents the event that gets passed to the callback, and by naming that variable i you prevent the callback from using i from the outer scope.

You need to remove the i parameter of the callback function:

onClick={() => console.log('Click to',i.content)}

or rename it to something else:

onClick={(event) => console.log('Click to',i.content)}