質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

解決済

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

naokoo
naokoo

総合スコア1

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1回答

0リアクション

0クリップ

268閲覧

投稿2022/09/11 04:07

前提

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

実現したいこと

<button>クリック1</button>

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

<button>クリック2</button>

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

<button>クリック3</button>

<p>テキスト3</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 = ["テキスト1", "テキスト2", "テキスト3"];
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を伴わないものは作成できました。
その場合、クリック1を押すと、テキスト2とテキスト3も開いてしまいます。
押したボタンのボックスに対してのテキストを表示・非表示したいので、indexで指定したいのですが、上手く動作しません。
わかる方教えていただきたいです。

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

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

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。