Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cards not displaying in React #56

Open
jaysee260 opened this issue Feb 14, 2018 · 4 comments
Open

Cards not displaying in React #56

jaysee260 opened this issue Feb 14, 2018 · 4 comments

Comments

@jaysee260
Copy link

jaysee260 commented Feb 14, 2018

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?

@jaysee260 jaysee260 changed the title Cards no displaying in React Cards not displaying in React Feb 14, 2018
@dancrisan
Copy link

Exactly same issue here

@glitchwizard
Copy link

Same issue here

@kaijchang
Copy link

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
Copy link

glenvollmer commented May 25, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants