Reactで選択された項目によって表示内容を出し分けしたい

Question

Reactでセレクトボックスの選択された値によって配列を出し分けしたいです。

やりたいこと

1.セレクトボックスの任意のものを選択
2.選択したらボタンを押下
3.セレクトボックスで選択した値に対応した配列をループして画面に表示する

配列はarray1とarray2の2種類あります。
セレクトボックスのvalue値にもarray1とarray2があり、
選択された方がthis.state.arrayNameにsetStateされ、
ボタンを押下したらvalueと同じ名前の配列をmapでループして表示させたいです。

現状

• セレクトされたvalueをarrayNameにセットするとこまではできています。

（選択されたvalueの値がconsoleに表示されます）

• {array1.map((hoge) =>

表示されっぱなしですがarray1の内容が表示されます。
array2にすれば内容が変わります。
（array1 ← ここが切り替えられればよいのですが、、、
{this.state.arrayName.map((hoge) =>ではだめでした爆）

ソース

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

const array1 = [
  { name: 'aaa' },
  { name: 'bbb' }
]

const array2 = [
  { name: 'ccc' },
  { name: 'ddd' }
]

class App extends Component {

  constructor(props) {
    super(props)
    this.state = {
      arrayName: "array1"
    }
  }

  onChangeSelectBox(event) {
    this.setState({
      arrayName: event.target.value
    })
  }

  onClickButton() {
    console.log(this.state.arrayName)
  }

  render() {
    return(
      <div>
        <select onChange={(event) => this.onChangeSelectBox(event)}>
          <option value="array1">array1</option>
          <option value="array2">array2</option>
        </select>
        <button onClick={() => this.onClickButton()}>セレクト</button>
        <div>
          {array1.map((hoge) =>
            <Loop hoge={hoge} key={hoge.name} />
          )}
        </div>
      </div>
    )
  }
}

const Loop = (props) => {
  return(
    <p>{props.hoge.name}</p>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

他によい書き方などがあれば教えていただけると幸いです。
どうぞよろしくお願いいたします。

Answer 1

以下はReactベースのコードではないですが、そこまで書けているのであれば、あとは以下のコードでイメージは掴めるかと思います。

const products = {
	books: [
		{ name: 'a' },
		{ name: 'b' },
		{ name: 'c' }
	],
	games: [
		{ name: 'x' },
		{ name: 'y' },
		{ name: 'z' }
	]
}

const selectedCategory = 'books';

products[selectedCategory].forEach(item => console.log(item));
> { name: 'a' }
> { name: 'b' }
> { name: 'c' }

{this.state.arrayName.map((hoge) =>ではだめでした爆）

this.state.arrayNameに入っているのは文字列であるため、map関数は使えません。

Comments

[agumon]

> HayatoKamono さん
ご回答ありがとうございます！
いただいたソースを参考にいたしまして解決いたしました。

```
import React, { Component } from 'react'
import ReactDOM from 'react-dom'

const obj = {
array1 : [
{ name: 'aaa' },
{ name: 'bbb' }
],
array2 : [
{ name: 'ccc' },
{ name: 'ddd' }
]
}

class App extends Component {

constructor(props) {
super(props)
this.state = {
arrayName: "array1"
}
}

onChangeSelectBox(event) {
this.setState({
arrayName: event.target.value
})
}

onClickButton() {
const arrayName = this.state.arrayName
const area = document.querySelector('.area')

obj[arrayName].forEach(item => {
area.insertAdjacentHTML('beforeend',
`<p>${item.name}</p>`
)
})
}

render() {
return(
<div>
<select onChange={(event) => this.onChangeSelectBox(event)}>
<option value="array1">array1</option>
<option value="array2">array2</option>
</select>
<button onClick={() => this.onClickButton()}>セレクト</button>
<div className="area"></div>
</div>
)
}
}

ReactDOM.render(
<App />,
document.getElementById('root')
)

```

[HayatoKamono]

お、良かったです！