Comment éviter le dangerSetInnerHTML ?

Question

J'ai écrit un composant React qui rend la notation et la visualise avec des étoiles. Mais j'ai dû utiliser dangerouslySetInnerHTML pour cela. Comment puis-je réécrire le composant avec un meilleur style de code et sans dangerouslySetInnerHTML ? Merci pour votre aide.

export default class BookRating extends React.Component {
  renderStars = () => {
    let result = '';

    for(let i=1; i<=5; i++) {
      this.props.rating >= i
      ? result += '<div class="fa fa-star checked"></div>'
      : result += '<div class="fa fa-star"></div>'
    }

    return result;
  }

  render () {
    return (
      <div className="rating" dangerouslySetInnerHTML={{ __html: this.renderStars() }} />
    );
  }
}

Answer 1

Vous pouvez rendre plusieurs éléments avec un tableau plutôt qu'avec une chaîne :

export default class BookRating extends React.Component {
  renderStars = () => {
    let result = [];

    for(let i=1; i<=5; i++) {
      this.props.rating >= i
      ? result.push(<div key={i} class="fa fa-star checked"></div>)
      : result.push(<div key={i} class="fa fa-star"></div>'
    }

    return result;
  }

  render () {
    return (
      <div className="rating">{this.renderStars()}</div>
    );
  }
}

Comme Quentin et Emile l'ont souligné, vous pouvez écrire cette fonction en une seule ligne, comme suit :

renderStars = () => Array(5).fill(0).map(_, i => <div className={`fa fa-star${this.props.rating > i ? ' checked' : ''}`}/>)

Answer 2

J'ai fait quelque chose de similaire qui prenait également en charge les demi-étoiles et affichait des étoiles "vides" pour les places restantes (par exemple, 3,5 étoiles afficheraient 3 étoiles pleines, 1 demi-étoile et 1 étoile vide) :

const Rating = ({ rating }) => {
  rating = Math.round(rating * 2) / 2
  const fullStars = Math.floor(rating)
  const halfStars = rating - fullStars > 0.2 ? 1 : 0
  const emptyStars = 5 - fullStars - halfStars

  return (
    <div css={{ whiteSpace: "nowrap", ".fa": { color: "yellow" } }}>
      {[...Array(fullStars)].map((_, index) => (
        <span key={`f-${index}`} className="fa fa-star" />
      ))}
      {[...Array(halfStars)].map((_, index) => (
        <span key={`h-${index}`} className="fa fa-star-half-o" />
      ))}
      {[...Array(emptyStars)].map((_, index) => (
        <span key={`o-${index}`} className="fa fa-star-o" />
      ))}
    </div>
  )
}