Алексей Уколов

takeDate() {
        return this.state.card.map(index => {
            return (
                <div>{index.date}</div>
            );
        })
    }

Скорее всего, у вас после маунта происходит ещё какое-то изменение элемента, которое и меняет значение. Анимация или ещё что-то подобное.
Когда вы выводите весь ref в консоль и получаете значение оттуда, это происходит намного позже маунта, когда всё уже встало на свои места.

Попробуйте сделать так и проверьте:

componentDidMount() {
  setTimeout(
    () => {
      if (typeof this.elementRef !== 'undefined') {
        console.log(this.elementRef.current.offsetLeft);
      }
    },
    5000
  )
}

Пути три:
1. Не использовать spread.
2. Не использовать eslint.
3. Настроить eslint так, чтобы он не считал это нарушением.

import Component1 from './Component1';

onChange={this.handleSearch.bind(this)}

Просто использовать widgets.map() - массив же уже отсортирован и будет обработан по порядку.

<button type="button" value="+">+</button>{el.quantity}<button type="button" value="-">-</button>

[...credits.cast, ...credits.crew].map((person) => person.name)

Я понимаю, что нельзя передать объект Date.

Передать можно, нельзя отрендерить. Соответственно, и к строке приводить нужно там, где рендерите.

Input не может содержать контент.

Вам не нужно вызывать метод (и сделать этого нельзя), но вы можете выполнить запрос прямо на рефе:

componentDidMount() {
  console.log(return this._imgEl.getBoundingClientRect());
}

const items = filteredProducts.filter((product) => product.category === "Some, category");

return (
    <div className="products-list">
        <Title title="Some Title" />
        <div className="products-container">
            <p>{items.length}</p>
        </div>
        <div className="products-container">
            {items.map((product) => (
                <ProductCard
                    key={product.id}
                    product = {product}
                />
            )}
        </div>
    </div>
);

99% современного кода, который доступен публично, лежит на git-хостингах. Поэтому, ответ на ваш вопрос выглядит так:
https://github.com/search?l=JavaScript&q=react+red...
https://gitlab.com/search?utf8=%E2%9C%93&search=re...

По запросу "те или иные проблемы" ничего детальнее сказать нельзя.

Пожалуйста, вот вам через reduce:

const chunks = [1,2,3,4,5,6,7].reduce((chunks, value, index) => {
  const chunkIndex = Math.floor(index / 3);

  if (!chunks[chunkIndex]) {
    chunks[chunkIndex] = [];
  }

  chunks[chunkIndex].push(value);

  return chunks;
}, []);

return chunks.map((chunk) => (
  <div key={chunk.join(`-`)}>
    {chunk.map((value) => (
      <div key={value}>
        {value}
      </div>
    ))}
  </div>
))

Ошибка возникает ещё при самом первом рендере, до того даже, как будет отправлен запрос данных, поэтому что бы вы там не меняли, толку не будет.
На все ваши вопросы ответ один: нужно в render() проверять есть данные или нет и исходя из этого рендерить тот или иной ответ:

render() {
    if (!this.state.users[0]) {
        return null; // Или что угодно
    }

    return (
      <InvestorBoxWrapper>
        <InvestorBox>
          <WithAva>
            <Img src={'...'}/>
            <WithAvaH3>
              <H3>{this.state.users[0].id}</H3>
              <H3>...</H3>
            </WithAvaH3>
          </WithAva>
          <P>...</P>
        </InvestorBox>
      </InvestorBoxWrapper>
    )
}

Какой метод использовать чтобы зарендерить на момент когда есть все данные данные?

Нет такого.

Начните с документации.

https://reactjs.org/docs/state-and-lifecycle.html#...