React

Reactのrenderは必ずしもdivタグで閉じる必要はない

TableのRowをmapでループさせたいとき、条件分岐かなんかが絡んで何かしらのタグで閉じる必要が出てきたのですが、Table内でdivを使うとレイアウトが崩れてしまいます。

しかし、divタグを使わなくても代わりに<>と</>タグを使用することでレイアウトを崩さずに済みます。

例

<Table.Body>
        {state.todos.map(t => (
            <Todo
                key={t.id}
                todo={t}
                remove={() => dispatch({type: "remove", id: t.id})}
                edit={text => dispatch({type: "edit", id: t.id, text: text})}
            />
</Table.Body>

TodoコンポーネントのRender

        <>
            {mode === "list"
                ? <Table.Row>
                    <Table.Cell className="TodoText">{todo.text}</Table.Cell>
                    <Table.Cell className="TodoText">{todo.name}</Table.Cell>
                    <Table.Cell>
                    <Button className="RemoveTodo" onClick={remove}>Remove</Button>
                    <Button className="EditTodo" onClick={() => setMode("edit")}>Edit</Button>
                    </Table.Cell>
                    </Table.Row>
                : <Table.Row>
                    <Table.Cell>
                    <Input value={text.text} name="text" onChange={handleInputChange} className="EditTodoInput" />
                    </Table.Cell>
                    <Table.Cell>
                    <Input value={text.name} name="name" onChange={handleInputChange} className="EditTodoInput" />
                    </Table.Cell>
                    <Table.Cell>
                    <Button className="EditTodoSave" onClick={() => {edit(text); setMode("list");}}>Save</Button>
                    <Button className="EditTodoCancel" onClick={() => setMode("list")}>Cancel</Button>
                    </Table.Cell>
                    </Table.Row>}
        </>

<>のところをdivで囲むとTable.Cellがうまく機能しません。