reactjsを使用した一覧表の開閉ボタンを個別に開閉させたい

Question

実現したいこと

以下の設定で、”開く”リンクをクリックすると一覧全ての子の情報が開いてしまいますが、どの様に変更すれば、クリックした親に対する個別の子の情報だけを開く様になるかお教え頂けませんでしょうか？

前提

以下の様なreactjsを使用した記述で顧客関連情報を表示する一覧があります。以下のlevel1とlevel2は親子関係にあり”開く”リンクをクリックするとその子である情報が表示される設定にしたいと考えております。

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

以下の設定で、”開く”リンクをクリックすると一覧全ての子の情報が開いてしまいます。

該当のソースコード

import axios from "axios"
import { useEffect, useState } from "react";
import './css/List.css';

export default function List() {

    const [users, setUsers] = useState([]);
    useEffect(() => {
        getUsers();
    }, []);

    function getUsers() {
        axios.get('https://xxxxxx/api/users/').then(function(response) {
            console.log(response.data);
            setUsers(response.data);
        });
    }

    const [isOpen, setIsOpen] = useState(true);
    
return (
<div className="List">
{Object.values(users).map((user, key) => 

<div className="level1">
{user.level == 1 && 
<p>{user.name}</p>
}
<font onClick={() => setIsOpen(!isOpen)}> {isOpen ? "開く" : "閉じる"} </font>	
</div>

{user.level == 2 && !isOpen && 
<p>{user.address}</p>
<p>{user.email}</p>
<p>{user.profession}</p>
}

 )}      
</div> 	
)
    				
}

試したこと

loop内のonClick処理から値を渡そうと試しました。

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

axios@1.3.1
react-dom@18.2.0
react-scripts@5.0.1
react@18.2.0

Comments

[hoshi-takanori]

isOpen を配列か何かにするとか…。

[uky]

user.levelってどのような値で、どう変化するのでしょうか？
どのような値
→ 1or2 の数値? 配列？

どう変化する
→ isOpenと同じような動き？？
→ 開くと数字が2に変わるとか

できればuserのオブジェクトを見せていただきたいです。よろしくお願いします。

[jud]

説明不足で申し訳ございません。dbのテーブル内で親であればlevelは1、子であれば2です。levelは1か2だけです。数値であり変化は致しません。

[uky]

ということは、「レベル1のname（font）をクリックしたら、レベル２のデータを表示する」ということを実現したい、という認識であっていますか？

[jud]

uky様、
混乱させてしまい大変恐縮でございます。開くというリンクがlevel1の下に配置されてあり、クリックするとlevel2のデータを表示させたいです。ただ上記の顧客情報の(name,address,email,proffession)というDB構造は混乱させていますので、忘れて頂き（申し訳ございません。）、通常の親子関係にある、（コメント、返信）などの関係の複数の親がある中でその個別の子のデータを表示するという設定を想定して頂きたく存じます。

Answer 1

あまり綺麗ではないですが。。。

問題

• isOpen setIsOpenがユーザーのレコードごとに存在していないこと
  • Listコンポーネント内にisOpen setIsOpen が一つしか存在していないため、あるユーザーをクリックすると全てのユーザーの情報が表示されてしまっていた

修正方針

• 選択している一意のユーザーデータをstate管理し、比較をすることで対象のレコードのみを表示させる
  • 一意のユーザーデータがなければ動かないです。。。
• levelによる表示の区別は不要と思いましたので削除しました

修正後のコード

// 表示用の関数から除外しました
function getUsers() {
  axios.get('https://xxxxxx/api/users/').then(function(response) {
    console.log(response.data);
    setUsers(response.data);
  });
}

export default function List() {
  // このコンポーネント内で管理されるstateを上位の方にまとめておくと読みやすくなります
  const [users, setUsers] = useState([]);
  const [selectedName, setSelectedName] = useState('') // 一意に定まるデータがあるのであれば、それをstateとして管理する。（ここではnameを代用します）
  // その次にアクション
  useEffect(() => {
    getUsers();
  }, []);
  // onClickのアクションをuser.nameが一致しているかどうかで分ける
  const onClick = (name) => {
    selectedName === name ? setSelectedName("") : setSelectedName(name);
  };
    
  return (
    <div className="List">
      {Object.values(users).map((user, key) => 
      <div className="level1">
        <p>{user.name}</p>
        <font onClick={() => onClick(user.name)}> {selectedName === user.name ? "閉じる" : "開く"} </font>	
      </div>
      {selectedName === user.name && (
        <p>{user.address}</p>
        <p>{user.email}</p>
        <p>{user.profession}</p>
      )}
    )}      
    </div> 	
  )
}

Comments

[jud]

uky様、
回答頂きまして感謝致します。あれこれと確認をしておりました。個別の子を表示しております。しかしながら、例えば、user.nameが同じ場合、同じ名前の複数の子を開いてしまいます。名前が同じということからでしょうか？なので、user.idで試しましたが、（頂いた記述のnameをidに変更して）今度は全く表示しなくなりました。何かお分かりになりますでしょうか？

[jud]

uky様、
個別の子だけが表示されました。本当に説明不足で大変恐縮でございましたが、感謝の限りでございます。idを使用し、子のセクションでselectedName === user.parent_idという設定にすることで期待通りに動作しております。ありがとうございます。

[uky]

意図通りの挙動となってよかったです！
`name`でなく`id`を使用するのであれば、変数名も`selectedUserId`などに変更した方が可読性の面で優れると思います。ご参考までに。

[jud]

uky様、
それではselectedUserIdに変更いたします。ありがとうございます。