F
что может быть опасней гос работника, который не на видит свою работу
export default function List({ children }) {
const handlerClick = useCallback((data) => {
console.log("LIST ITEM DATA:");
console.log(data);
}, []);
return (
<ul>
{
React.Children.map(children, (child, index, id) => {
return React.cloneElement((child), {
index,
onClick: handlerClick
});
})
}
</ul>
);
}Делаешь отдельный компонент для пункта списка - User
function User({ id, login, onClick }) {
const data = {
id,
login
};
const handlerClick = useCallback(() => {
onClick(data);
}, [onClick, data]);
return (
<li onClick={handlerClick}>{login}</li>
);
}Рендер списка
<List>
{
users.map((user) => (
<User key={user.id} { ...user } />
))
}
</List>
