menu tabの実装

MenuTabの実装
Webでよく見られるTabを実現しましょう.
🌈完全なコード

export default class MenuTab extends Component {
  state = {
    currentId: 1,
  };

  clickHandler = (id) => {
    this.setState({ currentId: id });
  };

  render() {
    return (
      <div className="wrapper">
        <ul className="tabs">
				{
          <li onClick={() => this.clickHandler(1)}>First</li>
          <li onClick={() => this.clickHandler(2)}>Second</li>
          <li onClick={() => this.clickHandler(3)}>Third</li>
          {/* ==> map함수로 변경 */}
          {CATEGORY_ARR.map((category, idx) => {
            return (
              <li key={category} onClick={() => this.clickHandler(idx + 1)}>
                {category}
              </li>
            );
          })}
        </ul>
        <div className="contents">{MAPPING_OBJ[this.state.currentId]}</div>
      </div>
    );
  }
}

//변하는 값이 아니기 때문에 클래스 밖에서 변수 선언
const MAPPING_OBJ = {
  1: <First />,
  2: <Second />,
  3: <Third />,
};

//조건문 대신 객체로 맵핑!
const CATEGORY_ARR = ["First, Second, Third"];

初期状態値currentId:1

state = {
   currentId: 1,
 };

そしてtabクリック時の(onClick)関数をユーザに実行させる

<li onlick={() => this.clickHandler(1)}> First</li>

click関数はパラメータとしてidを受信し、状態値を入力したパラメータ値に変換します.

clickHandler = (id) => {
   this.setState({ currentId: id });
 };

currentId値を条件付きレンダリングし、id値に一致する構成部品を表示します.

{this.state.currentId ===1 && <First />
{this.state.currentId ===2 && <Second />
{this.state.currentId ===3 && <Third />

🌈重複コードの削減
ここで繰り返すコードを減らす

  {this.state.currentId === 1 && First}
  {this.state.currentId === 2 && Second}
  {this.state.currentId === 3 && Third}

グローバル変数として、オブジェクトでKey:Value、Keyで数字、Valueで構成部品を使用できます.

const MAPPING_OBJ = {
  1: First,
  2: Second,
  3: Third,
};

次に[]配列にstateのcurrentId値を入力します.
重複するコード作成の代わりに

 { MAPPING_OBJ [this.state.currentId] 

ここで繰り返す関数の実行を減らす

<li onlick={() => this.clickHandler(1)}> First </li>
<li onlick={() => this.clickHandler(2)}> Second </li>
<li onlick={() => this.clickHandler(3)}> Third </li>

グローバル変数として指定し、[]配列に置換Tab Stringを追加します.

const CATEGORY_ARR = ["First", "Second", "Third"];

変数CATEGORY ARRはmapを返し、パラメータとしてcategoryとindexを入れます.
ここでは、従来のデフォルト1,2,3ではなくキー値idxを与える必要があります(stateが1に設定されているため)また、classNameを与える理由も違います.1,2,3が違うからです.
変数に指定したcategoryを設定します!

  {CATEGORY_ARR.map((category, idx) => {
            return ( <li key={idx}
                onClick={() => this.clickHandler(idx + 1)}
                className={category} >