0xD34F

Используйте withRouter.

Делаем метод:

onMouseDown(e) {
  e.preventDefault();
}

И добавляем его кнопке удаления значения в качестве обработчика соответствующего события:

onMouseDown={this.onMouseDown}

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

А может, всё-таки стоит засунуть вызов setState в функцию?

Обращался к API в componentDidMount() и отправлял в стейт, но это вызывает перерендеринг компонента и в доках считается нежелательно.

Это в каких доках? В тех, что известны мне, это прямо рекомендуется:

You should populate data with AJAX calls in the componentDidMount lifecycle method. This is so you can use setState to update your component when the data is retrieved.

держите

вот так

isBlockNavButtons отвечает за логику disable для тех кнопок. То есть если у нас элемент последний или первый, то мы блочим нужную нам кнопку.

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

В общем, я бы заменил if-else на что-то такое:

dispatch({
  type: `${CREATE_QUESTION}_BLOCK_BUTTON`,
  payload: {
    blockPreviousButton: elementIndex === 0,
    blockNextButton: elementIndex === data.length - 1,
  },
});

Условие допустимости обновления должно быть чуть более сложным - при запрете надо допускать обновление в случае, если вы пытаетесь выполнить разблокировку, т.е:

shouldComponentUpdate(nextProps, nextState) {
  return !this.state.updatesLocked || !nextState.updatesLocked;
}

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

Может кто-нибудь подсказать почему так происходит и как исправить?

Отвечать на вопрос "почему" особого смысла нет - ерундой какой-то занимаетесь, все эти дополнительные массивы, кто вас этим глупостям научил?

Как исправить - да выбросить всё лишнее на хрен, оставить один массив items, с ним и работать:

class AddItems extends React.Component {
  state = {
    value: '',
    items: [],
  }

  inputChange = ({ target: { value } }) => {
    this.setState({ value });
  }

  addNewItem = () => {
    if (this.state.value) {
      this.setState({
        items: [ ...this.state.items, {
          text: this.state.value,
          id: (new Date()).getTime().toString(),
        } ],
        value: '',
      });
    }
  }

  render() {
    return (
      <div className="addItems">
        <div className="addSection">
          <input type="text" value={this.state.value} onChange={this.inputChange} />
          <input type="submit" onClick={this.addNewItem} />
        </div>
        <div className="listSection">
          <ul>{this.state.items.map((item) => <li key={item.id}>{item.text}</li>)}</ul>
        </div>
      </div>
    )
  }
}

Добавьте в LibraryContent:

componentDidUpdate(prevProps) {
  if (prevProps.url !== this.props.url) {
    this.getData();
  }
}

тег должен меняться,а не добавляться, как по дефолту сейчас

Вообще-то, "по дефолту" - это как раз то, что вам нужно. Внимательнее изучайте документацию.

Объект-то в строку надо превратить.

Добавляете

import ReactDOMServer from 'react-dom/server';

в начало вашего index.js, затем

textField.innerText = IconsList.internet;

меняете на

textField.innerText = ReactDOMServer.renderToStaticMarkup(IconsList.internet);

Нормальное ли разделение компонентов

Вы бы показали что-нибудь более законченное... У вас там всего лишь 85 строк кода, а вы волнуетесь, хорошо ли компоненты выглядят. СЕРЬЁЗНО??!

правильно ли делать такие передачи props??

Сомнительно. Зачем вручную возиться с четырьмя значениями? Вдруг завтра надо будет сделать 5 или 8 или 23 - так и будете копипастить? Кладёте их в отдельный объект и работаете уже с этим объектом, типа так.

Ну, косяк где-то в компоненте. Если обновить версию material-ui, всё будет OK.

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

Обновить не вариант, в проекте этот юзается(
Слишком много надо будет переписывать

Обновляйте не до последней версии тогда. Если верить чейнджлогу, этот баг был исправлен в версии 1.0.0-beta.22 (в вашем примере предыдущая, так что думаю, особых проблем не будет).

Так вы уже почти всё сделали сами... просто передавайте в кнопку isSelected, типа так.

В описании параметров компонента про content сказано лишь, что это "default value to be set", и ничего не сказано, что с его помощью содержимое редактора можно обновлять.

Что делать? Ну, можно обновлять значение вручную, типа так.

class App extends React.Component {
  state = {
    value: '',
  }

  onChange = ({ target: { value } }) => {
    this.setState({ value });
  }

  render() {
    const name = this.state.value.split(/\s+/);

    return (
      <div>
        <input onChange={this.onChange} />
        <p>Ф: {name[0]}</p>
        <p>И: {name[1]}</p>
        <p>О: {name[2]}</p>
        {name[3] && <p>WTF??! {name.slice(3)}</p>}
      </div>
    );
  }
}

При нажатии на svg, event.target присваивается конкретным элементам - картинка внутри svg, текст, фигура итд.

event.target.closest('svg')

Допустим я нашел нужный эл-т, и вижу в console.log нужный атрибут, но если вызвать его напрямую, возвращается undefined

card.getAttribute('stroke')

UPD. Но вообще, вы совсем не в том направлении двигаетесь. Вместо того, чтобы пытаться достучаться до атрибутов, надо работать со стейтом, который определяет их значения. Как-то так:

onClickFuagra = () => {
  this.setState({
    strokeFuagra: '...',
  });
}

onClickFish = () => {
  this.setState({
    strokeFish: '...',
  });
}

<Samy svgXML={fuagra} onClick={this.onClickFuagra}>
  ...
</Samy>
<Samy svgXML={fish} onClick={this.onClickFish}>
  ...
</Samy>

Можно конечно и общий обработчик оставить:

onClick = e => {
  const svg = e.target.closest('svg');

  this.setState({
    [имя свойства зависит от svg, как определить по кому был клик - думайте сами]: '...',
  });
}

<div className="banners" onClick={this.onClick}>
  ...

onKeyDown = e => {
  if (e.key === 'Tab') {
    e.preventDefault();

    const
      input = e.target,
      str = input.value,
      currPos = input.selectionStart,
      wordEnd = str.slice(currPos).search(/[^\w]/);

    let pos = str.slice(currPos + wordEnd).search(/[^\s]/);
    if (pos) {
      pos += currPos + wordEnd;
    }
    if (pos === currPos) {
      pos = 0;
    }

    input.setSelectionRange(pos, pos);
  }
}

<input value={this.state.str} onKeyDown={this.onKeyDown} />

https://jsfiddle.net/acvjhxyt/