【React】モーダル画面で選択肢を選んだ後、ホーム画面に戻ってその内容を反映させるための書き方を教えてください。

Question

お世話になっています。
下記の質問についてご教示を願います。

【質問の主旨】

ReactとDeepLのAPIを使って翻訳アプリを作っています。ホーム画面(App.js)でピンク色で囲っているTextBoxコンポーネントをクリックするとモーダル画面（Modal.js）に移動して、翻訳の対象となる原文の言語を選べる仕組みになっています。

(ホーム画面)

このモーダル画面で選んだ言語が、ホーム画面で反映されるようようにするためには、App.jsをどのように書き換えれば良いでしょうか？

（モーダル画面）

【質問の補足】

ここまで自分が作成したApp.js と Modal.jsのコードは以下の通りです。

1. App.js

import TextBox from "./components/TextBox";
import Arrows from "./components/Arrows";
import Button from "./components/Button";
import Modal from "./components/Modal";
import { useState } from "react";

const App = () => {
  const [showModal, setShowModal] = useState(null);
  const [inputLanguage, setInputLanguage] = useState("EN");
  const [outputLanguage, setOutputLanguage] = useState("JA");
  
  const handleClick = () => {
    setInputLanguage(outputLanguage);
    setOutputLanguage(inputLanguage);
  }

  return (
    <div className="app">
      {!showModal && <>
        <TextBox
          selectedLanguage={inputLanguage}
          style="input"
          setShowModal={setShowModal}
        />
          <div className="arrow-container" onClick={handleClick}>
            <Arrows />
          </div>
        <TextBox 
          selectedLanguage={outputLanguage}
          style="output"
          setShowModal={setShowModal}
        />
      </>}

      {showModal && 
        <Modal 
          setShowModal={setShowModal}
          chosenLanguage={showModal === "input" ? inputLanguage : outputLanguage}
          setChosenLanguage={showModal === "input" ? setInputLanguage : setOutputLanguage}
      />}
    </div>
  );
}

export default App;

2. Modal.js

import { useState } from "react";

const Modal = ({ setShowModal, chosenLanguage, setChosenLanguage }) => {

  const [selectedOption, setSelectedOption] = useState("");

  const handleSelectedChange = (e) => {
    setSelectedOption(e.target.value);
  }

  console.log(selectedOption);

  return (
    <div className="option-list">
      <div className="search-bar">
        <select 
          className="source-language"
          value={selectedOption}
          onChange={handleSelectedChange}
        >
          <option value="BG">BG</option>
          <option value="CS">CS</option>
          <option value="DA">DA</option>
          <option value="DE">DE</option>
          <option value="EL">EL</option>
          <option value="EN">EN</option>
          <option value="ES">ES</option>
          <option value="ET">ET</option>
          <option value="FI">FI</option>
          <option value="FR">FR</option>
          <option value="HU">HU</option>
          <option value="ID">ID</option>
          <option value="IT">IT</option>
          <option value="JA">JA</option>
          <option value="KO">KO</option>
          <option value="LT">LT</option>
          <option value="LV">LV</option>
          <option value="NB">NB</option>
          <option value="NL">NL</option>
          <option value="PL">PL</option>
          <option value="PT">PT</option>
          <option value="RO">RO</option>
          <option value="RU">RU</option>
          <option value="SK">SK</option>
        </select>
        <div className="close-button" onClick={() => setShowModal(null)}>
          <svg
            focusable="false"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
          >
            <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
          </svg>
        </div>
      </div>
    </div>
  )
}
export default Modal;

—

以上、よろしくお願い申し上げます。

Answer 1

components/Modal.js 側では useStateによって選択された言語をステートとして持つのは不要かと思われますので、以下の修正でいかがでしょうか？

-import { useState } from "react";
-
 const Modal = ({ setShowModal, chosenLanguage, setChosenLanguage }) => {
-
-  const [selectedOption, setSelectedOption] = useState("");
-
   const handleSelectedChange = (e) => {
-    setSelectedOption(e.target.value);
+    setChosenLanguage(e.target.value);
+    setShowModal(null);
   }
 
-  console.log(selectedOption);
-
   return (
     <div className="option-list">
       <div className="search-bar">
         <select
           className="source-language"
-          value={selectedOption}
+          value={chosenLanguage}
           onChange={handleSelectedChange}
         >
           <option value="BG">BG</option>

参考までに以下はModal.js を上記のように修正してみたサンプルです。

• https://codepen.io/t4tikk3x/pen/zYMNPyY?editors=0010

（※ Button, Arrows, TextBox は質問にコードが無かったので当方で適当なダミーを作りました。）

Comments

[echizeyayota]

bataille910 さん
アドバイスありがとうございます。
ご提案いただいたコードの通り自分のコードを修正すると、意図通りの動作をするようになりました。
大変助かります。今後ともどうぞよろしくお願いします。

Answer 2

この回答はGPT-4による自動生成回答です

Modal.js の handleSelectedChange 関数内で、選択された言語を親コンポーネント（App.js）に渡すように変更しましょう。そのために、setChosenLanguage を呼び出します。

1. Modal.js の変更

const handleSelectedChange = (e) => {
  setSelectedOption(e.target.value);
  setChosenLanguage(e.target.value); // この行を追加
}

これで、モーダル画面で選択された言語が App.js の inputLanguage または outputLanguage に反映されるようになります。

2. App.js の変更

App.js には変更は不要です。Modal.js の変更により、選択された言語が inputLanguage または outputLanguage に反映されるようになりました。

これで、モーダル画面で選択した言語がホーム画面に反映されるようになります。

Comments

[echizeyayota]

ご回答ありがとうございます。
handleSelectedChange 関数内にsetChosenLanguage(e.target.value)を加えました。
ですがこれだけではモーダル画面からホーム画面に自動で遷移して、モーダル画面で選択した言語をホーム画面で確認することができません。

モーダル画面で選択した言語をホーム画面で確認できるようにするまでは、Modal.js（場合によってはApp.jsも）をどのように書き換えれば良いでしょうか？