【React】大量のテキストボックスコンポーネントをレンダリングする方法

Reactで大量のテキストボックスコンポーネントをレンダリングする方法のまとめです。

新規で追加した内容や変更箇所をわかりやすいように赤字にしています。

配列を使った方法とmap関数を使った方法２種類となります。

動作環境
開発環境
画面レイアウト
構成
作成したコード
リファクタリングしたコード
1. 配列を使った方法
2. map関数を使った方法
GitHub
まとめ
おすすめの書籍
おすすめのUdemy講座
1. 関連

動作環境

エディション	Windows 11 Home
バージョン	21H2
Node	18.15.0

動作環境

開発環境

こちらの構成で動かしています。

画面レイアウト

大量のテキストボックスコンポーネントの画面レイアウトとなります。

赤枠の部分がレンダリングしたいテキストボックスとなります。

１列に４個のテキストボックスがレンダリングされている。それが２列分あります。

構成

src
│  index.jsx
│
├─components
│      TextBox.jsx
│
└─pages
        ComponentDuplicationPage.jsx

作成したコード

１列に４個のテキストボックスを並べる。それを２列分作成したものがこちらです。

ComponentDuplication.jsx

import React from "react"

export const ComponentDuplication = () => {
  return (
    <>
      <h1>Component Duplication</h1>
      <div>
        <input type="text" name="input01"></input>
        <input type="text" name="input02"></input>
        <input type="text" name="input03"></input>
        <input type="text" name="input04"></input>
      </div>
      <div>
        <input type="text" name="input01"></input>
        <input type="text" name="input02"></input>
        <input type="text" name="input03"></input>
        <input type="text" name="input04"></input>
      </div>
    </>
  )
}

これをリファクタリングしていきます。

リファクタリングしたコード

使いまわせるようにテキストボックスをコンポーネント化しました。

TextBox.jsx

import React from 'react'

export const TextBox = (props) => {
    const { index } = props
    return <input key={index} type='text' name={`input${index}`}></input>
}

ComponentDuplication.jsxを修正していきます。

配列を使った方法

配列にTextBoxコンポーネントを４個分格納していきます。格納した後にレンダリングする。

import React from 'react'
import { TextBox } from '../components/TextBox'

export const ComponentDuplication = () => {
    let textBoxes = []

    for (let i = 0; i < 4; i++) {
        textBoxes.push(<TextBox key={i} index={i} />)
    }

    return (
        <>
            <h1>Component Duplication</h1>
            <div>{textBoxes}</div>
            <div>
                <input type='text' name='input01'></input>
                <input type='text' name='input02'></input>
                <input type='text' name='input03'></input>
                <input type='text' name='input04'></input>
            </div>
        </>
    )
}

この状態で画面を表示すると、同じレイアウトとなります。

map関数を使った方法

次は配列に格納するのではなくmap関数を使ってTextBoxコンポーネントをレンダリングしていきます。

import React from 'react'
import { TextBox } from '../components/TextBox'

export const ComponentDuplication = () => {
    let data = [1, 2, 3, 4]

    return (
        <>
            <h1>Component Duplication</h1>
            <div>
                {data.map((value, index) => {
                    return <TextBox key={value} index={index} />
                })}
            </div>
            <div>
                <input type='text' name='input01'></input>
                <input type='text' name='input02'></input>
                <input type='text' name='input03'></input>
                <input type='text' name='input04'></input>
            </div>
        </>
    )
}

map関数を応用した方法です。邪道なやりかたですが、こんなこともできる。

import React from 'react'
import { TextBox } from '../components/TextBox'

export const ComponentDuplication = () => {
    let data = [
        [1, 2, 3, 4],
        [5, 6, 7, 8],
    ]

    return (
        <>
            <h1>Component Duplication</h1>
            {data.map((value, index) => {
                return (
                    <div key={index}>
                        {data[index].map((value, index) => {
                            return <TextBox key={value} index={index} />
                        })}
                    </div>
                )
            })}
        </>
    )
}

結果も同じです。