Да, в основном мне нужно отобразить звезду (некоторый элемент i) в соответствии с рейтингом рецепта (5 звезд, поэтому, если оценка равна 3, мне нужно создать 3 звезды). Большое спасибо, ценю любые советы (мне нужно отобразить звезды, где сейчас находится функция карты в jsx, хотя это не решение)
Детали.js
import { useParams } from 'react-router-dom';
import './Details.css';
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import Image from './vitaminDfood-1132105308-770x553.jpg';
import {Link} from 'react-router-dom'
import ReactStars from 'react-rating-stars-component'
function Details() {
const [details, setDetails] = useState([]);
const { recipeId } = useParams();
useEffect(() => {
axios
.get(`https://cookbook.ack.ee/api/v1/recipes/${recipeId}`)
.then((res) => setDetails(res.data));
console.info(details);
});
const ratingChanged = (newRating) => {
var rate = {
score:newRating
}
axios.post(`https://cookbook.ack.ee/api/v1/recipes/${recipeId}/ratings`,rate)
.then((res) => {
console.info(res.data);
})
console.info(newRating);
};
return (
<>
<div className = "details">
<div className = "food-photo">
<img src = {Image} alt = "" />
<Link to = "/"> <i class = "fas fa-arrow-left arrow"></i></Link>
<h1>{details.name}</h1>
</div>
<div className = "star-line">
{details.score.map((star,index)=>(
<i class = "fas fa-star"></i>
))}
<h1 className = "duration">{details.duration}</h1>
</div>
<p className = "info">{details.info}</p>
<h1 className = "ingredience">Ingredience</h1>
<div className = "ing">{details.ingredients}</div>
<h1 className = "ingredience">Příprava</h1>
<p className = "description">{details.description}</p>
</div>
<div className = "stars">
<ReactStars
classNames = "star"
size = {48}
onChange = {ratingChanged}
/>
</div>
</>
);
}
export default Details;
Вы можете сгенерировать массив с необходимым количеством элементов и отобразить его:
...
{new Array(details.score).fill(null).map(() => (
<i class = "fas fa-star"/>
))}
...