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 %}