Почему не выходит вывести данные на старницу по Апи?

Falser, ошибки в консоли нет, просто данные не выводятся

TypeScript без Javascript?

Скорее нет чем да, тс считается отдельным языком но по моим ощущениям это некая надбавка над обычным js-ом и от js не убежишь...

Почему когда использую styled-components происходит ререндер?

Daniel~, мемоизацию пробовал, не помогло

Почему когда использую styled-components происходит ререндер?

Daniel~, ну так у каждого контролируемого инпута должен быть onChange иначе вообще ничего ввести не получится. Я так и не понял почему эта бибилотека стилей как-то влияет на setValue, без нее все ок - не рендерится

Почему когда использую styled-components происходит ререндер?

Daniel~,

const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
    setValue(e.target.value);
  };

Почему когда использую styled-components происходит ререндер?

Daniel~, почему стили на это влияют ?

Как реализовать кнопку "редактировать"?

Спасибо

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

Вадим,

так делал:
 <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>

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

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

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

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

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

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

<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

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

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

<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>

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

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

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

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

<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>
  );
}

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

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

Как изменить задний фон компонента полностью?

imko, пробовал, не показывает. все мраджины убрал

Как убрать пагинацию при загрузке страницы?

Да, я делал условным вот так:

{currentMovie &&
 <Pagination
        totaMoviess={totalMovies}
        MoviesPerPage={MoviesPerPage}
        currentPage={currentPage}
        paginate={paginate}
      />
}

Про length не додумался, спасибо

Как валидно сделать гет запрос используя аксиос, имея Bearer токен?

hryashik, спасибо

Как валидно сделать гет запрос используя аксиос, имея Bearer токен?

Владимир, это не работающая апи, мне просто было интересно как обращаться к серверу имея токен

Как валидно сделать гет запрос используя аксиос, имея Bearer токен?

Работает, благодарю.
Якобы есть еще вариант query parametr:

curl "https://api.json-generator.com/example/BN4f2rhz5CAy/data?access_token=zg4kl291ho1fwk9mk77azklbn99bnrh4gok3a4hj"

Не подскажете как сделать запрос имея такой curl? Просто фетчить или axios.get не работают...

Почему не получается типизировать стейт?

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