How to Pass Props to onClick Event

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)}
/>