Click here to Skip to main content
15,393,377 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello, I am building website of Mangas where each Manga has star reviews. I am done with backend but since I am very new to react, I can not figure out how to display stars on webpage. I'm developing it in Django so
id="{{ rating }}"
is an integer with rating. And
{% for manga, rating in mangas %}
is a loop where I display each manga with title, rating and so on.
console.log(prop.id)
returns each manga rating 2 times so mangas with ratings 2, 4, 5 are logged as 2, 4, 5, 2, 4, 5.

What I have tried:

{% block script %}
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
{% endblock %}
<script type="text/babel">
    function Apicall(props) {
        props.star.forEach(prop => {
            return Render_rating(prop.id)
        });
        
    
       function Render_rating(props) {
           if (parseInt(Math.round(props) == 0)) {
            return (
                <img src="static/mangas/nostar.png"/>
            )
           }
           else {
           for (var i = 0; i = parseInt(Math.round(props)); i++) {
           return Render_stars()
        }
       } 
       
       function Render_stars() {
           return (
           <img src="static/mangas/fullstar.png"/>
           )
       }
    }
}
       ReactDOM.render(<Apicall star={document.querySelectorAll(".stars")}  />, document.getElementById('app'))
     </script>
{% for manga, rating in mangas %}
<div id="manga">
<a href="{% url 'manga' manga.id %}">
<div class="stars" id="{{ rating }}"></div>
<div id="app"></div>
<h1>{{ manga.title }}</h1>
<img src="{{ manga.image.url }}">
<br/>{% for genre in manga.genre.all %}{{ genre }}<br/>{% endfor %}
{{ manga.Description }}
</a>
</div>
{% endfor %}
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900