作成したコンポーネントを分割したら、HTML構造が可笑しくなってしまいました。

前提・実現したいこと

以下のようなコードを目指しています。

JavaScript
1render()
2{
3    return(<div>
4        <Input />
5        <Submit />
6        <List />
7    </div>);
8}

HTML
1<div>
2  <input type="text">
3  <input type="submit">
4  <div>
5    <!-- Todoリストを表示するHTMLです -->
6  </div>
7</div>

問題

JSXの規約（？）から、以下のようなHTML構造になってしまいます。

<div> <input type="text"> <div> <input type="submit"> <List />/* Todoリストを表示するHTMLです */ </div> </div>

試したこと

公式マニュアルのチュートリアルとメインコンセプト
 Todoリストの作成サンプルコード

補足情報（FW/ツールのバージョンなど）

React歴3日です。
React.js:Ver.16.12.0

該当のソースコード

JavaScript
1import React, {Component} from 'react';
2
3export default class Sample extends Component
4{
5    Ideal()
6    {
7        return(<div>
8            <Input />
9            <Submit />
10            <List />
11        </div>);
12    }
13
14    render()
15    {
16        return(<div>
17            <Input />
18        </div>);
19    }
20}
21
22class Input extends Component
23{
24    constructor(props)
25    {
26        super(props);
27        this.handleChange = this.handleChange.bind(this);
28        this.state = {
29            todos: []
30        };
31    }
32
33    handleChange(event)
34    {
35        this.setState({
36            value: event.target.value,
37        });
38    }
39
40    render()
41    {
42        return(
43            <div>
44                <input type="text" value={this.state.value} onChange={this.handleChange} />
45                <Submit value={this.state.value} />
46            </div>
47        );
48    }
49}
50
51
52
53class Submit extends Component
54{
55    constructor(props)
56    {
57        super(props);
58        this.handleClick = this.handleClick.bind(this);
59        this.state = {
60            todos: []
61        };
62    }
63
64    handleClick(value)
65    {
66        this.setState({
67            todos: [...this.state.todos, value]
68        });
69    }
70
71    render()
72    {
73        return(
74            <div>
75                <input type="submit" value="Submit" onClick={() => this.handleClick(this.props.value)} />
76                <List todos={this.state.todos} />
77            </div>
78        );
79    }
80}
81
82
83class List extends Component
84{
85    render()
86    {
87        return(
88            <div>
89                <h3>ToDo</h3>
90                <ul>
91                    {this.props.todos.map((todo) => <li key={Math.random()}>{todo}</li>)}
92                </ul>
93            </div>
94        )
95    }
96}
97

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

回答1件

ベストアンサー

<div> 〜 </div> の代わりに <> 〜 </> (React.Fragment) を使いましょう。
参考: Reactで追加ノード無しで複数要素をreturnする - Qiita

JavaScript
1class Submit extends Component {
2
3    // 略
4
5    render() {
6        return(
7            <>
8                <input type="submit" value="Submit" onClick={() => this.handleClick(this.props.value)} />
9                <List todos={this.state.todos} />
10            </>
11        );
12    }
13}