onClick
is very common Javascript Event, you may not believe you could make a mistake like this.
<ul className="dnx-photo-grid">
{photos.map((photo) => {
return (
<li key={photo.id}>
<img
src={photo.urls.regular}
onClick={(photo) => props.handleSelect(photo)}
/>
</li>
);
})}
</ul>
After passing photo
as a parameter in onClick={(photo) => handleSelect(photo)}
, the debugger
shows the error says "photo.urls is undefined". That's becasue, you
assign 'photo' as the first parameter in onClick, and it's actually
passing in 'event' object. The right way to do it is simply don't
passing in "photo", like below:
<img
src={photo.urls.regular}
onClick={() => props.handleSelect(photo)}
/>