Cards not displaying in React

[jaysee260]

I don't quite understand what's happening, but the cards are not visible on the actual website. This is the card code

<div class="github-card" id="120403299" data-github="jsdev17/reservations" data-width="400" data-height="" data-theme="default"></div>

And this is the script tag, which I've included in the head of my index.html file; placing it at the bottom of the body doesn't work either

<script src="https://cdn.jsdelivr.net/gh/lepture/github-cards@latest/jsdelivr/widget.js"></script>

This is how I'm rendering the code:

renderRepoCard(repo) {
        return (
          <div className="github-card"
              id={repo.id}
              data-github={repo.full_name}
              data-width="400" data-height=""
              data-theme="default">
          </div>
        );
      }

renderRepoCard is called several times within a .map() method, which is applied to an array of repos held in the component's state.

The code for the cards is getting rendered but I can't see them on the screen. Anyone else having this issue? Where is the script tag supposed to go? If I have more than one card, do I need more than one script tag?

[dancrisan]

Exactly same issue here

[glitchwizard]

Same issue here

[kaijchang]

I don't know if there's a solution short of modifying the source code, but the problem is that the script scans the page one time, when it's loaded, so dynamic content rendered by something like React won't be detected.

[glenvollmer]

componentDidMount() { const script = document.createElement("script"); script.src = "//cdn.jsdelivr.net/github-cards/latest/widget.js"; document.body.appendChild(script); }

this is how I was able to load the script in a class component in a React.js web app