How can I make a difference in the number of stars in react cards?-CodePudding

I want to make difference the in the number of yellow stars in the picture below. I used map function but don't know how to make a difference on the cards. Is there a way to make a difference by using the 'if' syntax according to the numbers in the array?

Cards

this is SectionBottom.jsx :

import React from 'react';
import "../section5.css";
import Section5Card from './Section5Card';

const array = [
  {
    'id' : '1',
    'img' : "https://cdn.inflearn.com/public/courses/324119/course_cover/07c45106-3cfa-4dd6-93ed-a6449591831c/그룹 5 복사 4.png",
    'title' : '실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발',
    'name' : '김영한',
    'star' : '5',
    'comment' : '(1473)',
    'price' : '₩88,000',
    'people' : ' 12400명',
  },
  {
    'id' : '2',
    'img' : "https://cdn.inflearn.com/public/courses/324671/course_cover/638eee1a-6381-402d-a17b-3724751414f1/frontend-env-eng.png",
    'title' : '프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)',
    'name' : '김정환',
    'star' : '5',
    'comment' : '(169)',
    'price' : '₩69,300',
    'people' : ' 2000명',
  },
  {
    'id' : '3',
    'img' : "https://cdn.inflearn.com/public/courses/329477/cover/80fb90fb-0212-4eec-8fb0-7875622b198e/329477-eng.png",
    'title' : '애플 웹사이트 인터랙션 클론!',
    'name' : '1분코딩',
    'star' : '5',
    'comment' : '(187)',
    'price' : '₩77,000',
    'people' : ' 3200명',
  },
  {
    'id' : '4',
    'img' : "https://cdn.inflearn.com/public/courses/327193/cover/010c8faf-bfc5-4c6a-9623-a68dc3b38697/327193-eng.png",
    'title' : 'Slack 클론 코딩[백엔드 with NestJS   TypeORM]',
    'name' : '조현영',
    'star' : '4.5',
    'comment' : '(58)',
    'price' : '₩44,000',
    'people' : ' 1100명',
  },
  {
    'id' : '5',
    'img' : "https://cdn.inflearn.com/public/courses/329477/cover/80fb90fb-0212-4eec-8fb0-7875622b198e/329477-eng.png",
    'title' : '모바일 웹 퍼블리싱 포트폴리오 with Figma',
    'name' : '코딩웍스(Coding Works)',
    'star' : '0',
    'comment' : '(0)',
    'discount' : '₩132,000',
    'price' : '₩92,400',
    'people' : ' 100명',
  }
]

function Section5Bottom() {
  return (
    <div id='Section5Bottom'>
      {
        array.map((a, i) => {
          return (
            <Section5Card products={a} key={i} />
          )
        })
      }
    </div>
  )
}

export default Section5Bottom;

and this is Section5Card.jsx :

import React from 'react';
import '../section5.css';

function Section5Card(props) {
  return (
    <div id='Section5Card'>
      <img src={props.products.img} id="Section5CardImg" />
      <div id='Section5CardTitle'>
        {props.products.title}
      </div>
      <div id='Section5CardName'>
        {props.products.name}
      </div>
      <div id='Section5CardComment'>
        {props.products.comment}
      </div>
      <div id='Section5CardPrice'>
        {props.products.price}
      </div>
      <div id='Section5CardPeople'>
        {props.products.people}
      </div>
    </div>
  )
}

export default Section5Card;

and finally, I I tried to make star as Section5Star.jsx. This component shows one star well. But i didn't put this component to Section5Card component yet

import '../section5.css';

function Section5Star() {
  return (
    <div>
      <div id='Section5Star'><svg aria-hidden="true" data-prefix="fas" data-icon="star"  role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="16" height="16" data-value="1"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg>
      </div>
    </div>
  )
}

export default Section5Star;

CodePudding user response：

You can do it like this

import '../section5.css';

const size = 16;

function Section5Star(props) {
  const { partially } = props;
  
  return (
    <div>
      <div id='Section5Star' style={{ width: partially ? size * partially : size }}><svg aria-hidden="true" data-prefix="fas" data-icon="star"  role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="16" height="16" data-value="1"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg>
      </div>
    </div>
  )
}

export default Section5Star;

import React from 'react';
import '../section5.css';

function Section5Card(props) {
  return (
    <div id='Section5Card'>
      <img src={props.products.img} id="Section5CardImg" />
      <div id='Section5CardTitle'>
        {props.products.title}
      </div>
      <div id='Section5CardName'>
        {props.products.name}
      </div>
      <div id='Section5CardComment'>
        {props.products.comment}
      </div>
      <div id='Section5CardPrice'>
        {props.products.price}
      </div>
      <div id='Section5CardPeople'>
        {props.products.people}
      </div>
      <div id='Section5CardStars'>
        {Array.from({length: ~~props.products.stars}).map(() => {
          <Section5Star />
        })}
        {props.products.stars % 1 && <Section5Star partially={props.products.stars % 1} />}
      </div>
    </div>
  )
}

export default Section5Card;

CodePudding user response：

What you can do is pass your object as a prop to Section5Star component and then, accoring to star property, you can display the stars. Here is a very simple example with integer values only and red stars (not outlined) just to give you the big picture

import '../section5.css';

function Section5Star(props) {
  return (
    <div>
      <div id='Section5Star'>
        {[...new Array(parseInt(props.star))].map(i => <svg aria-hidden="true" data-prefix="fas" data-icon="star"  role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="16" height="16" data-value="1"><path fill="#FDCC11" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg>)}
        {[...new Array(5 - parseInt(props.star))].map(i => <svg aria-hidden="true" data-prefix="fas" data-icon="star"  role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="16" height="16" data-value="1"><path fill="red" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg>}
      </div>
    </div>
  )
}

export default Section5Star;