0xD34F

Режете массив на куски - будет массив массивов. И обходите его, внешний цикл создаёт элементы .section, внутренний - .section__item:

class App extends React.Component {
  state = {
    cards: Array.from({ length: 7 }, (_, i) => ({
      id: i + 1,
      content: Math.pow(i, 3),
    })),
  }

  addElem = () => {
    this.setState(({ cards }) => ({
      cards: [ ...cards, {
        id: cards.length + 1,
        content: Math.random().toString(16).slice(2),
      } ],
    }));
  }

  render() {
    const { cards } = this.state;
    const chunkLen = 3;
    const chunks = Array.from(
      { length: Math.ceil(cards.length / chunkLen) },
      (_, i) => cards.slice(i * chunkLen, (i + 1) * chunkLen)
    );

    return (
      <div>
        <button onClick={this.addElem}>add new element</button>
        {chunks.map(n => (
          <div className="section">
            {n.map(m => (
              <div className="section__item">
                <a>#{m.id} {m.content}</a>
              </div>
            ))}
          </div>
        ))}
      </div>
    );
  }
}

Если я обновляю state в componentDidUpdate выводит ошибку о бесконечном цикле.

Добавьте проверку, что изменились именно props:

componentDidUpdate(prevProps, prevState) {
  if (this.props.currentSearch !== prevProps.currentSearch) {
    // ваш код с вызовом setState
  }
}

если написать в render то он до отрисовки сделает скролл
componentDidMount вообще один раз сработает после отрисовки страницы

Я слышал, будто бы ещё есть какой-то componentDidUpdate - делайте свой скролл в нём.

Вот вы вроде бы в курсе, что стейт не следует менять напрямую - а тем не менее это делаете.

Что вы понимаете под "мутабелен" и "иммутабелен" по отношению к методам массива я не знаю, и знать не хочу. Но могу точно сказать - не то, что надо. Вам явно стоит заглянуть сюда.

Делайте копию массива перед splice'ом, и сам splice выполняйте над копией - так же, как push при добавлении элемента.

Кстати, о добавлении - почему у вас там в код метода зашита константа в качестве нового id? Нажали "добавить" два раза - вот и два элемента с одинаковыми id. Неужели так трудно было сгенерировать уникальный? Например.

Задайте key для картинки:

<img src={data.url} key={data.url} width="100%" alt="" />

componentDidUpdate(prevProps) {
  if (this.props.match.params.iduser !== prevProps.match.params.iduser) {
    this.fetchUserData();
  }
}

this.handleAddNews.bind(this, arguments)

А не кажется ли вам, что тут есть что-то лишнее?

Ну и вообще, не надо так. Вместо

handleAddNews(newPost) {

пишите

handleAddNews = (newPost) => {

и тогда никакого bind использовать будет не надо:

<Add newsadd={this.handleAddNews} />

Ну так вы же компоненты перепутали. Передаёте titlename в Constructor_template, а надо передавать updatetitle. И наоборот - передаёте updatetitle в Ready_template, а надо передавать titlename.

Кладёте в state массив:

items: [ 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven' ]

А в render станет так:

<TabContainer>Item {this.state.items[value]}</TabContainer>

UPD. А если добавить в массив ещё и иконки, то и рендеринг Tab'ов тоже упростится.

MarkerClusterer вам в помощь.

UPD. https://codesandbox.io/s/for-httpsqnahabrcomq56380...

Да так же, как у вас есть сейчас со встроенным скриптом - указываете type="text/babel" вашему отдельному файлу при подключении.

А вообще, вам стоит загуглить: "webpack", "create-react-app".

Вообще - e.target.getAttribute('здесь имя атрибута'), но, как уже заметили выше - вы сильно неправы добавляя name div'у. Замените на data-атрибут:

onClick = e => {
  console.log(e.target.dataset.name);
}

<div data-name="xxx" onClick={this.onClick}>hello, world!!</div>

Или можно вообще не пользоваться атрибутами, а сразу нужное значение передавать куда надо:

<div onClick={() => console.log('xxx')}>hello, world!!</div>

<div style={{ ...styles.inputInit, backgroundColor: 'green' }}>

Работа с формами, это извините, основы. Читайте документацию.

Смещайте сайдбар, а не main (ну и кнопку открытия-закрытия тоже - поскольку она вне сайдбара).

Изменяем назначение классов:

- <main className={active ? 'move-to-left' : ''}>
+ <main>

- <div className="sidebar">
+ <div className={'sidebar ' + (active ? 'move-to-left' : '')}>

- <NavRight onClick={this.toggleActive} buttonClass={!active ? 'active' : ''} navClass="hidden-xs" />
+ <NavRight onClick={this.toggleActive} buttonClass={active ? 'active move-to-left' : ''} navClass="hidden-xs" />

И стили:

+ body {
+   overflow: hidden;
+ }

.sidebar {
  ...
- z-index: 1;
- right: 0;
+ z-index: 3;
+ right: -400px;
+ transition: all .7s ease;

UPD. Вынесено из комментариев:

Имелось в виду, что контент тоже двигается при смещении sidebar, но не убегает полностью в левый угол, а остается по центрy оставшейся ширины

Вместо того, чтобы делать transform, меняйте ширину. Как-то так.

Вам бы разобраться, как оператор ++ работает. Сначала вы изменяете значение state.counter напрямую (чего делать НЕ НАДО), затем setState устанавливает в качестве нового значения counter'а его предыдущее значение, возвращаемое постфиксным ++.

Как Вы думаете, как бы написал опытный реакт-разработчик...

Я конечно таковым ни разу не являюсь, но всё-таки скажу пару слов.

проверки через тернарный оператор внутри render?

Это окей - conditional rendering.

render() {
    const paths = [

Из метода render массив paths следует убрать. Может быть, его даже стоит сделать параметром компонента.

onClick={ () => {this.setState({isOpen: !this.state.isOpen})} }

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

this.props.history.listen(...

Если предполагается, что во время работы приложения экземпляр компонента будет создаваться несколько раз, то при удалении экземпляра надо снимать обработчик, иначе вывод в консоль задвоится (затроится, зачетверится,...). Сделать это несложно - listen возвращает функцию, снимающую обработчик, так что:

componentWillMount() {
  this.unlisten = this.props.history.listen(...

componentWillUnmount() {
  this.unlisten();

<Link className="next_btn"...
<Link className="prev_btn"...
Выглядят подозрительно похожими. Я бы рассмотрел вариант сделать под них отдельный компонент, который бы получал isOpen и свойства объектов paths[currPathIndex +/- 1] в качестве параметров.

Это что-то вроде пагинации.

Очень странно, но допустим:

const currPathIndex = paths.findIndex(n => n.link === location.pathname);
const isPrev = currPathIndex !== 0;
const isNext = currPathIndex !== paths.length - 1;

Дальше можно отключать кнопки:

const onClick = e =>
  history.push(paths[currPathIndex + +e.target.dataset.step].link);

<button disabled={!isPrev} data-step={-1} onClick={onClick}>PREV</button>
<button disabled={!isNext} data-step={+1} onClick={onClick}>NEXT</button>

Или не рендерить ссылки:

{isPrev && <NavLink to={paths[currPathIndex - 1].link}>PREV</NavLink>}
{isNext && <NavLink to={paths[currPathIndex + 1].link}>NEXT</NavLink>}

https://jsfiddle.net/ev93d8fj/1/

почему он может не перерисовывается когда данные поступают?

Ни почему.

Компонент перерисовывается.

С тем же результатом, что и без данных.

Потому что забыли .length где-то здесь:

Object.keys(this.props.landingState) > 0