如何在react,html,bootstrap中展开和折叠表格行？

Question

我在创建滑动表时遇到问题，主要思想是当您单击按钮时，表格的一行会展开，下面是数据，就像手风琴一样。

const Crypto = ({ data }) => {
  const [search, setSearch] = useState('');

  return (
    <div className='App'>
      <Container>
        <header className='main-header '>
          <h1 className='text-center mt-4'>Wyszukiwarka crypto</h1>
        </header>
        <Search search={search} setSearch={setSearch} />
        <RandomColorTable>
          <Table >
            <caption className='caption-top'>Wynik zapytania z bazy</caption>
            <thead>
              <tr className='odd:bg-white even:bg-slate-50'>
                <th className='border border-slate-300'>Id</th>
                <th className='border border-slate-300'>User ID</th>
                <th className='border border-slate-300'>Title</th>
                <th className='border border-slate-300'>Actions</th>
              </tr>
            </thead>
            <tbody>
            
              {data
                .filter((item) => {
                  return search === '' ? item : item.title.includes(search);
                })
                .map((item) => (
                  <tr key={item.market_cap_rank} className='random-background '>
                    <td className='border border-slate-300'>{item.id}</td>
                    <td className='border border-slate-300'>{item.userId}</td>
                    <td className='border border-slate-300'>{item.title}</td>
                    <td><button class="btn btn-info" >Show More</button></td>
                  </tr>
                  
                ))}
                <button name='hej!' value={"heja"}></button>
            </tbody>
          </Table>
          </RandomColorTable>
      </Container>
    </div>
  );
};

这是我的代码，我从 api 获取数据并将其显示在表中。