ボタンをクリックするとその配列に対して表示される機能を実装したい

Question

前提

reactで各ボックスに付随したボタンをクリックするとそのボックス内容が表示・非表示する機能を作りたいです。

実現したいこと

<button>クリック１</button>

<p>テキスト１</p>

<button>クリック２</button>

<p>テキスト２</p>

<button>クリック３</button>

<p>テキスト３</p>

・クリック1を押すと、テキスト1が表示/非表示になる
・クリック2を押すと、テキスト2が表示/非表示になる
・クリック3を押すと、テキスト3が表示/非表示になる

発生している問題・エラーメッセージ

エラーメッセージ
Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more:

該当のソースコード

import React, { useState } from "react";
import "./styles.css";

export const App = () => {
const textArr = ["テキスト１", "テキスト２", "テキスト３"];
const [open, setOpen] = useState(false);

const onClickOpen = (index) => {
setOpen(!open[index]);
};
return (
<>
{textArr.map((text, index) => {
return (
<div key={text}>
<button onClick={() => onClickOpen(index)}>クリック</button>
{open[index] && <p>{text}</p>}
</div>
);
})}
</>
);
};

試したこと

配列のindexを伴わないものは作成できました。
その場合、クリック１を押すと、テキスト２とテキスト３も開いてしまいます。
押したボタンのボックスに対してのテキストを表示・非表示したいので、indexで指定したいのですが、上手く動作しません。
わかる方教えていただきたいです。

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

コードサンドボックスを使用しています。
react 18.2.0
react-dom 18.2.0
react-scripts 4.0.0

Answer 1

配列textArrの要素の数と同じ個数の要素を持つブール値の配列をuseStateで作成して、ボタンがクリックされたときに、クリックされたボタンのインデクスにあるブール値によって表示、非表示を切り替えるとよいです。たとえばこんな感じです：

const App = () => {
  const textArr = ["テキスト１", "テキスト２", "テキスト３"];
  const [visibilities, setVisibilities] = useState([...Array(textArr.length)].map(_ => false));
  
  const handleClick = (index) => {
    setVisibilities(prevState => prevState.map((v, i) => index === i ? !v : v));
  }
  
  return(
    <div>
      {visibilities.map((visible, i) => (
        <div key={textArr[i]}>
          <button onClick={() => handleClick(i)}>
            クリック
          </button>
          {visible && <p>{textArr[i]}</p>}
        </div>
      ))}
    </div>
  );
}

サンプル 👉 https://codepen.io/su507/pen/NWMrrRK?editors=0010

補足1

<div key={textArr[i]}> としているので、textArr は同じ文字列を要素として持っていないことが前提になります。もしtextArr は同じ文字列を要素として持っていると「keyが重複している」旨の警告が表示されることになると思われます。

補足2

上記の回答コードの中で長さが textArr.length で値がすべてfalseの配列を作るところは

[...Array(textArr.length)].map(_ => false)

としていましたが、手短かに以下で済んでました。

textArr.map(_ => false)

CodePenのサンプルは上記のように修正済みです。

補足3

テキストの表示、非表示切り替えの別のやり方として、テキストを囲んでいる <p> の style の display を、none または block で切り替えるという方法もあります。参考程度に眺めてください👉 https://codepen.io/su507/pen/qBYNNvJ?editors=0010

Comments

[naokoo]

ご丁寧に教えていただきありがとうございました。
ループする際は、下記の考え方が大事だと理解しました。
・各ボタンについてのステート定義
・各ボタンをクリックした際にステートの定義が切り替わる