如何在React JS中的单个表行中显示表数据

Question

我正在从后端获取用户数据。我正在使用bootstrap表显示数据。查看图像

我想以一行格式显示一张表下方的所有记录，

这是我的代码

 <div>
  <table className="table table border shadow table-striped table-md table-hover" style={{ marginLeft: '4%', marginTop: '13%', width: '173%' }}>
    <thead className="table-light">
      <tr style={{ color: 'blue', "fontSize": "18px" }}>
        <th scope="col">#</th>
        <th scope="col">Name</th>
        <th scope="col">Email id</th>
        <th scope="col">Role</th>
        <th scope="col">Action</th>
      </tr>
    </thead>
    <tbody>
          <tr>
            <th scope="row">{ 1}</th>
            <td>{user.name}</td>
            <td>{user.email}</td>
            <td>{user.role}</td>
            <td>
              <button type="submit" onClick={()=>{updateUser(user)}} className="btn btn-warning mx-1">{<FaUserEdit />} Edite</button> 
              <button type="submit" onClick={() => { deleteUser(user._id) }} className="btn btn-outline-warning mx-1">{<MdDelete />} delete</button>
            </td>
          </tr>
        
    </tbody>
  </table>
</div>