onClick event not working within nested React / Next.js component

Question

I can't seem to get the hideMoreDetails() function to work on this component. Nothing gets logged in the console and state remains unchanged when clicking on the 'close-more-info-cross' div.

Any clue? Could it be a stacking issue?

import { useState } from "react";
import TracklistAndPlayer from "./TracklistAndPlayer";

function ReleaseEntry(props) {
  const [playerDisplayId, setPlayerDisplayId] = useState(null);
  const [showMoreDetails, setShowMoreDetails] = useState(true);

  function showPlayer(event) {
    setPlayerDisplayId(event.target.getAttribute("data-tag"));
  }
  function hideMoreDetails() {
    console.log("hide more details");
    setShowMoreDetails(false);
  }
  function renderSection(section) {
    return (
      <div className="section">
        {section[0] && section.map(paragraph => <p>{paragraph.text}</p>)}
      </div>
    );
  }


  return (
    props.releases &&
    props.releases.map(function(release, index) {
      let tracklist = Object.values(release.data.tracks[0]);
      return (
        <div>
          <div className="release-entry-wrapper">
            <div onClick={showPlayer}>
              <img
                className="release-cover"
                key={`cover${index}`}
                src={release.data.cover.url}
                alt="release-cover"
                data-tag={index}
              />
              <div className="release-details">
                <div
                  key={`artist${index}`}
                  className="artist-name"
                  data-tag={index}
                >
                  {release.data.artist[0].text}
                </div>

                <div
                  key={`title${index}`}
                  className="release-name"
                  data-tag={index}
                >
                  <img
                    className="mini-play"
                    src="/img/play-song.png"
                    alt="mini-play"
                    data-tag={index}
                  />
                  {release.data.title[0].text}
                </div>
              </div>
            </div>
            {parseInt(playerDisplayId) === index && showMoreDetails && (
              <div>
                {
                  <div className="more-info-about-release">
                    <img
                      className="close-more-info-cross"
                      src="/img/cross.png"
                      alt="cross"
                      onCLick={hideMoreDetails}
                    />
                    <div className="tracklist-details">
                      {renderSection(release.data.tracklist)}
                    </div>
                    <div className="about-release">
                      {renderSection(release.data.about)}
                    </div>

                    <div className="credits">
                      {renderSection(release.data.credits)}
                    </div>
                  </div>
                }
                <TracklistAndPlayer
                  tracklist={tracklist}
                  setPlayerDisplayId={setPlayerDisplayId}
                />
              </div>
            )}
          </div>
          <style jsx>{`
            .release-entry-wrapper {
              padding-left: var(--global-margin);
              padding-right: var(--global-margin);
              font-family: var(--font1);
              font-size: var(--standard-font-size);
              text-transform: uppercase;
            }
            .release-cover {
              cursor: pointer;
              width: 100%;
              transition: transform 0.5s;
            }
            .release-cover:hover {
              transform: scale(1.005);
            }

            .release-details {
              padding-top: 1rem;
              padding-bottom: 1rem;
              padding-left: 0.5rem;
              padding-right: 0.5rem;
              text-align: center;
              letter-spacing: 0.05rem;
              transition: opacity 0.3s;
              transition: transform 0.5s;
              cursor: pointer;
            }
            .release-details:hover {
              opacity: 0.85;
              transform: scale(1.01);
            }
            .mini-play {
              width: 0.5rem;
              margin-right: 0.7rem;
            }
            .artist-name,
            .release-name {
              padding-top: 0.5rem;
              padding-bottom: 0.3rem;
            }
            .tracklist-details {
              margin-bottom: 2rem;
            }
            .close-more-info-cross {
              width: 0.6rem;
              position: absolute;
              right: 0;
              top: 0;
              transition: transform 0.3s;
              opacity: 0.7;
              cursor: pointer;
            }
            .close-more-info-cross:hover {
              width: 0.7rem;
              opacity: 1;
            }
            .more-info-about-release {
              text-transform: none;
              margin-bottom: 2rem;
              position: relative;
            }
            .more-info-section-title {
              margin-bottom: 1rem;
              margin-top: 1rem;
            }
            .about-release {
              margin-bottom: 2rem;
            }
          `}</style>
        </div>
      );
    })
  );
}

export default ReleaseEntry;

PS : link to the entire project: https://github.com/jeremieemk/elis-records-website

Yuan-Hao Chiang · Accepted Answer · 2020-03-08 12:18:55Z

1

You have a small typo on your onClick method:

<img
 className="close-more-info-cross"
 src="/img/cross.png"
 alt="cross"
 onCLick={hideMoreDetails}
    ^~~~~~ 👻
/>

It should be onClick, not onCLick.

If you open the browser's console, you would probably see a red warning such as onCLick method is not a dom property or such. I recommend keeping the console open when working with React, it will show many useful warnings.

answered Mar 8, 2020 at 12:18

Yuan-Hao Chiang

2,64312 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lojith Vinsuka · Accepted Answer · 2022-06-28 06:55:47Z

0

In my case, I had to rename the file name of the component in lowercase. After that, all click listeners worked. Ex: Footer.js (old file name) -> footer.js

Before that, I couldn't able to see changes in real-time (not only click listeners, UI changes didn't appear). I had to restart the server to see changes.

answered Jun 28, 2022 at 6:55

Lojith Vinsuka

1,0471 gold badge14 silver badges8 bronze badges

Collectives™ on Stack Overflow

onClick event not working within nested React / Next.js component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related