I want to add the transition on expanding or collapsing the table row onClick handler in React

Issue

I have a plain HTML table. I have a list of elements that I am displaying, and all <| tr> tag has a button to display some extra information by clicking on it. The transform: rotate property is working for the icon button but not working on expanding the row.

User.tsx

          <div className="user-table-container">
            <table className="user-table">
              <thead>
                <tr className="user-table-row">
                  <th>Name</th>
                  <th>Email</th>
                  <th>Open</th>
                  <th>Role</th>
                  <th>Active</th>
                  <th>Created At</th>
                </tr>
              </thead>
              <tbody>
                {allUsers.map((user) => {
                  return <UserList key={user._id} displayAll={seeAll}  {...user} />;
                })}
              </tbody>
            </table>
          </div>

UserList.tsx

const UserList = ({ displayAll, ...user }: UserListProps) => {
  const [expand, setExpand] = useState(false);

  useEffect(() => {
    if (displayAll) setExpand(true);
    else setExpand(false);
  }, [displayAll]);

  const handleExpand = () => setExpand(!expand);

  return (
    <>
      <tr className="user-table-row">
        <td>{user.username}</td>
        <td>{user.email}</td>
        <td>
          <IconButton
            className={`icon ${expand ? "open" : ""}`}
            onClick={handleExpand}
          >
            <KeyboardArrowDownIcon />
          </IconButton>
        </td>
        <td>{user.roles}</td>
        <td>{user.isActive ? "Yes" : "No"}</td>
        <td>{new Date(user.createdAt).toLocaleDateString()}</td>
      </tr>

// This is the extra information I want to display on button click
      {expand && (
        <tr className={`user_row ${expand ? "opened" : ""}`}>
          <td colSpan={6}>Id: {user._id}</td>
        </tr>
      )}
    </>
  );
};

// Css file

.user-table {
   width: 100%;
   margin: 0;
   padding: 20px;
   border-radius: 10px;
   border: 2px groove lightsteelblue;
}
.user-table-row>th,
.user-table-row>td,
.user_row>td {
   margin: 0;
   border-bottom: 1px groove lightsteelblue;
   padding: 20px;
   text-align: left;
}
.icon {
   transform: rotate(0deg);
   transition: all 0.25s;
}
.icon.open {
   transform: rotate(180deg);
}
.user_row {
   height: 0;
   overflow: hidden;
   transition: height 0.5s ease;
}
.user_row.opened {
   height: 100px;
}

The .icon className property is working, it's rotating the icon to 180deg. But the transition on row expanding or closing is not working.

Solution

check this link. don't use condition to hide row, use .close and .open css classes.

Answered By - AlirezaAzizi