Reactで星のレーティングを実装する

はじめに

Reactを使っていて星のレーティングを実装する機会があったので備忘録として記します。
ちなみに今回はパッケージを一切使っていないため、パッケージを使ってもっとお洒落なレーティングを作りたいと思った方はググって見てください。

• npmパッケージ

  • react-star-ratings - npm
  • react-star-rating-component - npm

完成形

※これよりもお洒落なレーティングを実装したい方はパッケージなどのコンポーネントをググってみてください。

作り方

作り方はざっくり言うとこんな感じです。

1. Stateで光らせる星の数を管理する
2. 星それぞれをboolean（trueかfalse）でどれを光らせるかを決定する
3. stateを参照しながらbooleanが入った配列を作る(星の数がMaxで5つなら作る配列の要素は5つ）
4. 「3」で作った配列をループさせてJSX要素（今回は星）をはき出す。その時、配列のindex番号をはき出した要素に振り分ける
5. onClickメソッドでハンドラー(関数)を当てて引数で振り分けたindex番号を受け取る
6. ハンドラー(関数)でstateを更新

コードで見ていきましょう

import React, { useState } from 'react';

export const StarRating: React.FC<> = () => { 
  const [ratingState, setRatingState] = useState<number>(0);
  const stars: boolean[] = [];
  for (let i = 0; i > 5; i++) {
    if( i < ratingState ) {
      stars.push(true);
    } else {
      stars.push(false);
    }
  }
  const HandleStarShine = (rating) => {
    setRatingState( rating + 1 );  // index番号は0~4だから星の数に合わせて1~5にする
  };
  return (
    {stars.map((val: boolean, index: number) => {
      return (
        <button onClick={() => HandleStarShine(index)} >
          {val ? <img src="光る星マーク" /> : <img src="光ってない星マーク"/>
        </button>
　　　　);
    })}
  );
};

こんな感じです。
コードにあるようにstateは押されたボタン（星）が持っているindex番号の値に更新されます。

まとめ

さて、この記事の星のレーティングはいくつでしたか？
また、ご指摘などもありましたらコメントの方をよろしくお願いします。
最近Reactを勉強しはじめたので、ハンドラーに引数を渡すのが個人的に難しかったのですが、今思えばReactのチュートリアルの三目並べゲームで引数を渡すのはすでにやってましたね（笑）勉強あるのみです（笑）