Как сделать. чтоб было ровно?

Question

[Bart Simpson]

Делаю учебное приложение и у меня есть верхний блок где есть названия значений (Coin, price, 24h и тд...) и снизу через апи выведены эти значения в отдельный блок но выходит коряво (24h с процентами совсем танцует):

Как сделать, чтобы все было ровно друг под другом? Можно задать фиксированную ширину каждому значению и названию но это глупо.

Answer 1

[Вадим]

использовать подходящий HTML элемент - table.

Ну а если религия не позволяет, то css grid

Comments

[Bart Simpson]

забыл о таблице, спасибо

[Bart Simpson]

Я получаю данные по апи и выходит так что блок с параметрами дублируется к каждому блоку со значениями, как это исправить?

<table>
      <tr>
        <th>#Logo</th>
        <th>Name</th>
        <th>Current Price</th>
        <th>Coin Volume</th>
        <th>Price Change</th>
        <th>Market Capitalization</th>
      </tr>

      <tr>
        <td>
          <h3>{props.coins.market_cap_rank}</h3>
          <img src={props.coins.image} alt="coin" />
        </td>
        <td>
          <h1>{props.coins.name}</h1>
        </td>
        <td>
          <p className="coin-price">${props.coins.current_price.}</p>
        </td>
        <td>
          <p className="coin-volume hide-mobile">
            ${props.coins.total_volume}
          </p>
        </td>
        <td>
          {props.coins.price_change_24h < 0 ? (
            <p className="coin-percent red hide-price">
              {props.coins.price_change_24h}%
            </p>
          ) : (
            <p className="coin-percent green hide-price">
              {props.coins.price_change_24h}%
            </p>
          )}
        </td>
        <td>
          <p className="coin-marketcap hide-mobile">
            ${props.coins.market_cap.toLocaleString()}
          </p>
        </td>
      </tr>
    </table>
  );
}

[Вадим]

Bart Simpson, что вы имеете в виду под "блок с параметрами дублируется к каждому блоку со значениями"?

[Bart Simpson]

Вадим, у меня есть два блока: 1) Названия значений (Coin, price, 24h и тд...) 2) Информация о монетах которая приходит по апи. Мне нужно чтоб блок с (Coin, price, 24h и тд...) был в единственном экземпляре а инфа о монетах шла в ряд (как на картинке). А у меня выходит так что каждый блок имеет (Coin, price, 24h и тд...) и данные о монете.

[Вадим]

Bart Simpson, так, ну, генерируйте thead один раз, добавляйте в таблицу, а потом генерируйте tbody и tr для tbody в цикле. вопрос в чем, все ещё не понятно

[Bart Simpson]

Вадим, я так и сделал:

<table>
      <thead>
        <tr>
          <th>#Logo</th>
          <th>Name</th>
          <th>Current Price</th>
          <th>Coin Volume</th>
          <th>Price Change</th>
          <th>Market Capitalization</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <h3>{props.coins.market_cap_rank}</h3>
            <img src={props.coins.image} alt="crypto" />
          </td>
          <td>
            <h1>{props.coins.name}</h1>
          </td>
          <td>
            <p className="coin-price">
              ${props.coins.current_price.toFixed(3)}
            </p>
          </td>
          <td>
            <p className="coin-volume hide-mobile">
              ${props.coins.total_volume.toLocaleString()}
            </p>
          </td>
          <td>
            {props.coins.price_change_24h < 0 ? (
              <p className="coin-percent red hide-price">
                {props.coins.price_change_24h.toFixed(2)}%
              </p>
            ) : (
              <p className="coin-percent green hide-price">
                {props?.coins.price_change_24h?.toFixed(4)}%
              </p>
            )}
          </td>
          <td>
            <p className="coin-marketcap hide-mobile">
              ${props.coins.market_cap.toLocaleString()}
            </p>
          </td>
        </tr>
      </tbody>
    </table>

[Вадим]

Bart Simpson, я вижу какой то компонент всей таблицы. Не вижу цикла отдельно для боди.

[Bart Simpson]

Вадим, первый компонент:

<table>
        <thead>
          <tr className="description">
            <th>#Logo</th>
            <th>Name</th>
            <th>Current Price</th>
            <th>Coin Volume</th>
            <th>Price Change</th>
            <th>Market Capitalization</th>
          </tr>
        </thead>
        {props.coins.map((coins) => {
          return (
            <Link to={`/coin/${coins.id}`} key={coins.id}>
              <CoinItem coins={coins} />
            </Link>
          );
        })}
      </table>

второй компонент:

<tbody className="coin-wrapper">
      <tr className="coin-data">
        <td>
          <h3>{props.coins.market_cap_rank}</h3>
          <img src={props.coins.image} alt="crypto" />
        </td>
        <td>
          <h1>{props.coins.name}</h1>
        </td>
        <td>
          <p className="coin-price">${props.coins.current_price.toFixed(3)}</p>
        </td>
        <td>
          <p className="coin-volume hide-mobile">
            ${props.coins.total_volume.toLocaleString()}
          </p>
        </td>
        <td>
          {props.coins.price_change_24h < 0 ? (
            <p className="coin-percent red hide-price">
              {props.coins.price_change_24h.toFixed(2)}%
            </p>
          ) : (
            <p className="coin-percent green hide-price">
              {props?.coins.price_change_24h?.toFixed(4)}%
            </p>
          )}
        </td>
        <td>
          <p className="coin-marketcap hide-mobile">
            ${props.coins.market_cap.toLocaleString()}
          </p>
        </td>
      </tr>
    </tbody>

Но получаю ошибку "Warning: validateDOMNesting(...): cannot appear as a child of

[Вадим]

Bart Simpson, ну так у Вас тут как минимум, 2 проблемы.
1) Вы tbody Link вставляете. Link во что рендерится? В ссылку? Или растворяется и добавляет слушатель клика на вложенный элемент?
2) У Вас в цикле генерируются tbody, хотя он должен быть один. А вот tr для tbody - в цикде.

[Bart Simpson]

Вадим, от линка я избавиться не могу, сделал tr в цикле для tbody, получаю новую ошибку:

react-dom.development.js:86 Warning: validateDOMNesting(...): cannot appear as a child of .

Буду переделывать на гридах

[Вадим]

Bart Simpson, самое главное в новой ошибке то вы и не скинули. Но суть что не валидный html, судя по тексту.
От ссылки можно уйти, обернув в ссылку название и растянув псевдо от названия на всю строку через абсолют

[Bart Simpson]

Вадим,

так делал:
 <table>
        <thead>
          <tr className="description">
            <th>#Logo</th>
            <th>Name</th>
            <th>Current Price</th>
            <th>Coin Volume</th>
            <th>Price Change</th>
            <th>Market Capitalization</th>
          </tr>
        </thead>
        <tbody>
          {props.coins.map((coins) => {
            return (
              <tr>
                <Link to={`/coin/${coins.id}`} key={coins.id}>
                  <CoinItem coins={coins} />
                </Link>
              </tr>
            );
          })}
        </tbody>
      </table>

[Вадим]

Bart Simpson, ну если link рендерится в ссылку, то понятно. Ссылка не может быть дочерним элементом для tr