Reactでselectタグで選択した内容とinputで入力した内容を結びつけて表示を出し分けたい

前提・実現したいこと

時間割アプリのようなものを作っていて、selectタグで曜日を選択しinputで授業名を入力すると、選択された曜日の下だけに"◯限国語"のように表示をしたいのですが今のままではすべての曜日の下に表示されてしまいます。
特定の曜日の下だけに表示するにはどうしたらよいでしょうか？

Javascript
1import React from 'react';
2import Loop from './Loop';
3
4const fixed= ["月曜日","火曜日","水曜日","木曜日","金曜日"]
5
6class App extends React.Component{
7  constructor(props) {
8    super(props);
9    this.state = {
10      lists:[],
11      input:"",
12      value:"",
13      days:"",
14    }
15    this.handleChange = this.handleChange.bind(this);
16    this.handleSubmit = this.handleSubmit.bind(this);
17    this.handleChangeDays = this.handleChangeDays.bind(this);
18  }
19
20  render () {
21    let list;
22
23      list = <Loop lists={this.state.lists}/>
24
25    return (
26
27      <div>
28        <h1>時間割</h1>
29          <form>
30            <select value={this.state.days}
31                    onChange={this.handleChangeDays}>
32              <option value="none">---</option>
33              <option value="月曜日">月曜日</option>
34              <option value="火曜日">火曜日</option>
35              <option value="水曜日">水曜日</option>
36              <option value="木曜日">木曜日</option>
37              <option value="金曜日">金曜日</option>
38            </select>
39
40            <select value={this.state.value}
41                    onChange={this.handleChangeOrders}>
42              <option value="none">---</option>
43              <option value="１限:">１限</option>
44              <option value="２限:">２限</option>
45              <option value="３限:">３限</option>
46              <option value="４限:">４限</option>
47              <option value="５限:">５限</option>
48            </select>
49
50            <input
51              onChange={this.handleChange}
52              type="text"
53              name="input"
54              value={this.state.input}
55              />
56
57            <button onClick={this.handleSubmit}>保存</button>
58            <button>削除</button>
59          </form>
60
61
62          {fixed.map((l) =>(
63            <div key={l.toString()}>
64              <p>{l}</p>
65              <p>{list}</p>
66            </div>
67          ))}
68
69      </div>
70    );
71  }
72
73  handleChange = (event) => {
74    this.setState({input:event.target.value})
75  }
76  handleChangeDays = (event) => {
77    this.setState({days:event.target.value})
78  }
79  handleChangeOrders = (event) => {
80    this.setState({value:event.target.value})
81  }
82
83  handleSubmit (e) {
84    e.preventDefault();
85    if (!this.state.input) return;
86    this.setState(
87      {
88      lists: [
89        ...this.state.lists,
90        {
91          input: this.state.input,
92          value: this.state.value
93        }],
94      input:"",
95      days:"",
96      value:""
97    });
98  };
99
100}
101
102export default App;

Javascript
1import React from 'react';
2
3class Loop extends React.Component {
4  render () {
5    return (
6      <div>
7      {this.props.lists.map((l) =>(
8        <div key={l.days}>
9          <p>{l.days}{l.value}{l.input}</p>
10        </div>
11      ))}
12      </div>
13    );
14  }
15}
16
17export default Loop;
18

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは

<p>{list}</p> として表示している list は、以下

jsx
1list = <Loop lists={this.state.lists}/>

のように、全アイテムを含む Loopコンポーネントとして作成しているので、各曜日に該当するアイテムのみの配列を渡した、 Loopを渡すようにします。

具体的な修正箇所は以下の３点です。

(1) <p>{list}</p> 　の部分を以下のように修正

jsx
1<p>
2  <Loop 
3    lists={this.state.lists.filter(item => item.days === l)} 
4  />
5</p>

(2) 上記により変数 list が不要になるので、以下の２行を削除

jsx
1let list;
2
3list = <Loop lists={this.state.lists}/>

(3) handleSubmit の中で setState する箇所で、追加する要素に days がないので追加

javascript
1    this.setState(
2      {
3      lists: [
4        ...this.state.lists,
5        {
6          input: this.state.input,
7          value: this.state.value,
8          days: this.state.days  //この行を追加
9        }],
10      input:"",
11      days:"",
12      value:""
13    });