Как выровнять имя пользователя на левой стороне и точки на правой стороне с React начальной загрузки ListGroup?

Question

У меня есть map, который получает всех пользователей и их очки.

Мой код выглядит так:

return (
   <ListGroup>
     {data.map((user, index) => (
       <ListGroupItem key={index}>
         <b>
           {user.name} : {user.total_points}
         </b>
       </ListGroupItem>
     ))}
   </ListGroup>
);

Теперь он выглядит так:

Как я могу получить имя пользователя на левой стороне и точки на правой стороне?Точки отображаются как 0.

Answer 1

Если это Bootstrap, уже существует класс утилит с плавающей точкой , называемый float-right, заключающий 0 или user.total_points в <span> или аналогичный элемент:

return (
   <ListGroup>
     {data.map((user, index) => (
       <ListGroupItem key={index}>
         <b>
           {user.name} : <span className="float-right">{user.total_points}</span>
         </b>
       </ListGroupItem>
     ))}
   </ListGroup>
);