Блог

Да, так что в основном мне нужно отобразить звезду (некоторый элемент i) в соответствии с рейтингом рецепта (5 звезд, поэтому, если оценка равна 3, мне нужно сгенерировать 3 звезды). Большое спасибо, ценю любые советы (мне нужно отобразить звезды там, где сейчас находится функция map в jsx, хотя это не решение)

Details.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.log(details);
  });

  const ratingChanged = (newRating) => {
    var rate={
      score:newRating
    }
    
    axios.post(`https://cookbook.ack.ee/api/v1/recipes/${recipeId}/ratings`,rate)
    .then((res) => {
      console.log(res.data); 
      
    })
    console.log(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"/>
        ))}
...