0xD34F

state отказывается обновляться

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

Проверяйте в componentDidUpdate, что props изменились - если да, делайте setState (побочным результатом будет двойное обновление компонента, можно избежать этого с помощью shouldComponentUpdate). Или используйте getDerivedStateFromProps.

А ещё лучше - хорошенько подумайте, действительно ли вам нужно дублировать props в state. Вероятно, есть вариант обойтись использованием только props.

Компонент Item, обработчик onImportantClick - надо останавливать всплытие события, чтобы оно не обрабатывалась ещё и в onItemClick, т.е.:

onImportantClick = (e) => {
  e.stopPropagation();
  this.setState(({ important }) => ({
    important: !important
  }));
};

const jsx = э-э-э, чё, это у вас тут фигурная скобка?

ошибка появилась из ниоткуда

Нет, она появилась из вашего невежества и лени. Вы бы почитали про jsx хоть что-нибудь, прежде чем начать код писать, чтобы вот так не позориться. Меняйте скобки на круглые.

Режете массив на куски - будет массив массивов. И обходите его, внешний цикл создаёт элементы .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'а его предыдущее значение, возвращаемое постфиксным ++.