**I am passing the user through to the modal ViewUser to show it data but it always show the same user when clicking in different user, I need to know how can I specify the user who I need to show their data, I send it in ViewUser component as user **

const UserList = () => {
    const [confirmDel, setConfirmDel] = useState(false);
    const [showData, setShowData] = useState(false);
    const usersList = useAppSelector((state) => state.users);

    const handleShowDataOpen = () => {
        setShowData(true);
    };

    const handleShowDataClose = () => {
        setShowData(false);
    };

    return (
        <>
            <div className={styles.main_container}>
                <h1>Users List</h1>
                {usersList.length === 0 ? (
                    <span className={styles.empty_container}>
                        No current registered users
                    </span>
                ) : (
                    <>
                        <TableContainer component={Paper}>
                            <Table aria-label="simple table" size="small">
                                <TableHead>
                                    <TableRow>
                                        <TableCell>Username</TableCell>
                                        <TableCell>First Name</TableCell>
                                        <TableCell>Age</TableCell>
                                        <TableCell>Action</TableCell>
                                    </TableRow>
                                </TableHead>
                                <TableBody>
                                        {usersList.map((user) => (
                                            <TableRow key={user.username}>
                                                <TableCell>
                                                    <Button variant="text" onClick={handleShowDataOpen}>
                                                        {user.username}
                                                    </Button>
                                                    <ViewUser showData={showData} user={user} handleShowDataClose={handleShowDataClose} />
                                                </TableCell>
                                                <TableCell>{user.firstName}</TableCell>
                                                <TableCell>{user.age}</TableCell>
                                                
                                                                                                </TableRow>
                                    ))}
                                </TableBody>
                            </Table>
                        </TableContainer>
                    </>
                )}
            </div>
        </>
    );
};

export default UserList;

CodePudding user response：

Your boolean state for showData is being set to true, which means that the ViewUser component is being shown for every user at the same time.

Instead, you could store the index of the single user which you want to show at a single time.

import { useState } from "react";
import { data } from "./data";

const UserList = () => {
  const [showData, setShowData] = useState(null);
  const usersList = data;

  const handleShowDataOpen = (index) => {
    setShowData(index);
  };

  const handleShowDataClose = () => {
    setShowData(null);
  };

  return (
    <>
      <div>
        <h1>Users List</h1>
        {usersList.length === 0 ? (
          <span>No current registered users</span>
        ) : (
          <>
            <div>
              <table>
                <thead>
                  <tr>
                    <th>Username</th>
                    <th>First Name</th>
                    <th>Age</th>
                  </tr>
                </thead>
                <tbody>
                  {usersList.map((user, index) => (
                    <tr key={user.id}>
                      <td>
                        <button
                          variant="text"
                          onClick={() => handleShowDataOpen(index)}
                        >
                          {user.firstName} {user.lastName}
                        </button>
                        <ViewUser
                          showUser={showData === index}
                          user={user}
                          handleShowDataClose={handleShowDataClose}
                        />
                      </td>
                      <td>{user.firstName}</td>
                      <td>{user.age}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </>
        )}
      </div>
    </>
  );
};

export default UserList;

const ViewUser = ({ user, showUser, handleShowDataClose }) => {
  return showUser ? (
    <div
      style={{
        position: "absolute",
        background: "rgba(255,255,255,0.5)",
        padding: 20
      }}
    >
      <pre>{JSON.stringify(user)}</pre>
      <button onClick={handleShowDataClose}>Close</button>
    </div>
  ) : null;
};

Alternatively, create a separate User component, and keep the open state inside it instead of in UserList.

import { useState } from "react";
import { data } from "./data";

const UserList = () => {
  const usersList = data;

  return (
    <>
      <div>
        <h1>Users List</h1>
        {usersList.length === 0 ? (
          <span>No current registered users</span>
        ) : (
          <>
            <div>
              <table>
                <thead>
                  <tr>
                    <th>Username</th>
                    <th>First Name</th>
                    <th>Age</th>
                  </tr>
                </thead>
                <tbody>
                  {usersList.map((user) => (
                    <User user={user} />
                  ))}
                </tbody>
              </table>
            </div>
          </>
        )}
      </div>
    </>
  );
};

export default UserList;

const User = ({ user }) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <tr key={user.id}>
      <td>
        <button variant="text" onClick={() => setIsOpen(true)}>
          {user.firstName} {user.lastName}
        </button>
        <ViewUser
          showUser={isOpen}
          user={user}
          handleShowDataClose={() => setIsOpen(false)}
        />
      </td>
      <td>{user.firstName}</td>
      <td>{user.age}</td>
    </tr>
  );
};

const ViewUser = ({ user, showUser, handleShowDataClose }) => {
  return showUser ? (
    <div
      style={{
        position: "absolute",
        background: "rgba(255,255,255,0.5)",
        padding: 20
      }}
    >
      <pre>{JSON.stringify(user)}</pre>
      <button onClick={handleShowDataClose}>Close</button>
    </div>
  ) : null;
};