複数行の仮想DOMを書き換える方法はありますか？

複数行の仮想DOMを書き換える方法はありますか？
コンポーネントからごちゃごちゃしたりと関数を追加したりと色々と試しましたが解決しませんでした。
お力添えお願いします。

追記2/6
今のところ自分がしたいことは難しいのではと結論に至りました。

React 要素はイミュータブルです。一度要素を作成すると、その子要素もしくは属性を変更することはできません。要素は映画の中のひとつのフレームのようなものであり、それは特定のある時点の UI を表します。

なのでルーティングするべき？

javaScript
1import React from 'react';
2import './App.css';
3
4function App() {
5    function start(){
6/**
7ここから仮想DOMの内容を大幅に変えたい。でもサンプルコード系には、アラートなど複数行を書き換えるコードが多くて参考にならない。
8fetun(
9<div>
10<p>aaaaaa</p>
11<p>rs</p>
12</div>
13)
14**/
15    }
16
17    return (
18        <div id="App" className="container">
19            <div className="row">
20                <div id="list" className="col-2">
21                    <button onClick={start}>ボタン</button>
22                </div>
23                <div id="contents" className="col-8">
24                    <p>
25おはよう
26                    </p>
27                    <p>
28こんにちは
29                    </p>
30                </div>
31            </div>
32        </div>
33    )
34}
35
36export default App;

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

回答1件

ベストアンサー

単に条件分岐で返り値をごっそり変えてしまう方法もあります。

jsx
1function App() {
2
3  // 中略
4
5  if(条件) {
6    return(
7      <div>
8        <p>aaaaaa</p>
9        <p>rs</p>
10      </div>
11    )
12  }
13
14      return (
15        <div id="App" className="container">
16            <div className="row">
17                <div id="list" className="col-2">
18                    <button onClick={start}>ボタン</button>
19                </div>
20                <div id="contents" className="col-8">
21                    <p>
22おはよう
23                    </p>
24                    <p>
25こんにちは
26                    </p>
27                </div>
28            </div>
29        </div>
30    )
31}