Reactにて表示・非表示を切り替えながら分岐質問を実装したい

①前提・実現したいこと
心理テストで、質問に答えていくだけで自分のタイプがわかるように、回答によって分岐する質問を実装したいです。
例えば以下の図のようなイメージです。
イメージ説明
a)まずは「Q1」「選択肢A」「選択肢B」が表示される

b-1)選択肢Aを選んだ場合、Q1は消え、代わりに「Q2」「選択肢C」「選択肢D」「選択肢E」が表示される
b-2)選択肢Bを選んだ場合、Q1は消え、代わりに「Q6」が表示される

c-1)b-1にて選択肢Cを選んだ場合、Q2は消え、代わりに「Q3」が表示される
c-2)b-1にて選択肢Dを選んだ場合、Q2は消え、代わりに「Q4」が表示される
c-3)b-1にて選択肢Eを選んだ場合、Q2は消え、代わりに「Q5」が表示される

②発生している問題・エラーメッセージ
③該当のソースコード
④自分で調べたことや試したこと
配列としてQ1、Q2、、、単位で格納しておき、stateを更新することで表示するQを変更するなど考えておりましたが、なかなか実装ができません。
jQueryで書かれたサイトは以下のものを見つけ参考にしておりましたが、諸事情により使えるライブラリはReact.jsのみとなります。
http://creatornote.nakweb.com/%E9%81%B8%E6%8A%9E%E3%81%95%E3%81%9B%E3%81%A6%E7%B5%90%E6%9E%9C%E7%9A%84%E3%81%AB%E7%AD%94%E3%81%88%E3%81%8C%E5%87%BA%E3%82%8B%E3%80%8E%E5%BF%83%E7%90%86%E3%83%86%E3%82%B9%E3%83%88%E3%80%8F%E5%9E%8Bjs/
掲載できるような作成コードもなく大変心苦しいのですが、コードを教えていただきたいです。

⑤使っているツールのバージョンなど補足情報
create-react-app で作ったプロジェクトでreactはバージョン17を使用しています。

以上、お知恵を拝借できると大変助かります、どうぞよろしくお願いいたします。

回答1件

自分でゼロから実装するのではなくライブラリという形ですが、「decision tree react」で検索すると、react-decision-tree-flow
というのがありました。

下記は、https://codesandbox.io/s/ybz8i?file=/src/index.js
を、図のフローに合うように改変した例です。
index.js

js
import React from "react";
import ReactDOM from "react-dom";
import { Wizard, Step, Controls } from "react-decision-tree-flow";

import "./styles.css";
const tree = {
  Q1: ["Q2", "Q6"],
  Q2: ["Q3", "Q4", "Q5"],
  Q3: [],
  Q4: [],
  Q5: [],
  Q6: [],

};
function App() {
  return (
    <div className="App">
      <h2>Start</h2>

      <Wizard tree={tree} first="Q1">
        <Step name="Q1">
          <div>
            Q1
            <br />
            <div className="btnSection">
              <Controls>
                {({ Q2 }) => (
                  <div onClick={Q2} className="btn">
                    A
                  </div>
                )}
              </Controls>
              <Controls>
                {({ Q6 }) => (
                  <div onClick={Q6} className="btn">
                    B
                  </div>
                )}
              </Controls>
            </div>
          </div>
        </Step>

        <Step name="Q2">
          <div>
            Q2.
            <br />
            <div className="btnSection">
              <Controls>
                {({ Q3 }) => (
                  <div onClick={Q3} className="btn">
                    C
                  </div>
                )}
              </Controls>
              <Controls>
                {({ Q4 }) => (
                  <div onClick={Q4} className="btn">
                    D
                  </div>
                )}
              </Controls>
              <Controls>
                {({ Q5 }) => (
                  <div onClick={Q5} className="btn">
                    E
                  </div>
                )}
              </Controls>
            </div>
          </div>
        </Step>
        <Step name="Q3">
          <div>
            Q3
            <br />
           </div>
        </Step>
        <Step name="Q4">
          <div>
            Q4
            <br />
           </div>
        </Step>
        <Step name="Q5">
          <div>
            Q5
            <br />
           </div>
        </Step>
        <Step name="Q6">
          <div>
            Q6
            <br />
           </div>
        </Step>
      </Wizard>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

style.css

css
.btnSection {
  display: flex;
  padding: 0.5rem 0;
}

.btnSection > div {
  margin-right: 1rem;
}

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  border: 2px solid green;
  text-transform: uppercase;
}