0xD34F

currentTarget:

event.currentTarget.getAttribute('имя_атрибута')

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

onClick={e => props.arrowHandler(e, VALUE)}

если условия задачи поменяются и...

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

<EditorWithTableOfContents tags={[ 'h1' ]} />
<EditorWithTableOfContents tags={[ 'h2', 'h3' ]} />

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

const EditorWithTableOfContents = ({ tags }) => {
  const [headers, setHeaders] = useState([]);
  const editorEl = useRef(null);

  const onChange = e => {
    setHeaders(Array.from(
      e.editor.document.$.querySelectorAll(tags.join(', ')),
      n => [ n.tagName, n.innerText ]
    ));
  };

  const goToAnchor = e => {
    const index = e.target.dataset.index;
    const d = editorEl.current.editor.document.$;

    d.documentElement.scrollTo({
      top: d.querySelectorAll(tags.join(', '))[index].offsetTop,
      behavior: 'smooth',
    });
  };

  return (
    <div>
      <CKEditor
        data={initData}
        onInstanceReady={onChange}
        onChange={onChange}
        ref={editorEl}
      />
      <h2>Содержание</h2>
      {headers.map(([Tag, text], index) => (
        <Tag key={index} data-index={index} onClick={goToAnchor}>
          {text}
        </Tag>
      ))}
    </div>
  );
};

https://codesandbox.io/s/for-https-qna-habr-com-q-...

Так дела не делаются. Страницу следует отрисовывать сразу, а пока данные не загрузились, пользователю показывают индикатор загрузки:

data ? <КакойТоКомпонентДляОтображенияДанных data={data} /> : <Preloader />

А зачем какой-то отдельный массив? Храните состояние чекбоксов в элементах workers.

При изменении состояния чекбоксов обновляйте workers:

inputChange = e => {
  const index = +e.target.dataset.index;

  this.setState({
    workers: this.state.workers.map((n, i) => i === index
      ? { ...n, checked: e.target.checked }
      : n
    ),
  });
}

<input
  type="checkbox"
  data-index={index}
  onChange={this.inputChange}
  checked={item.checked}
/>

Соответственно, вычисление суммы будет выглядеть так:

const sum = this.state.workers.reduce((acc, n) => acc + (n.checked ? n.salary : 0), 0);

https://codesandbox.io/s/ol342z1znz

Контекст потерялся. Ну и не надо пытаться достучаться до элемента через querySelector - он доступен как свойство target объекта события.

submitText = (e) => {
  this.setState({
    text: e.target.value,
  });
}

headerObj.offsetTop

Бессмысленная операция. Этот headerObj - совсем не тот, что в iframe'е. Лучше при клике в списке получайте индекс кликнутого элемента, и берите в iframe'е заголовок с таким же индексом.

const frame = document.getElementsByTagName('iframe')[0];

Вот такого не надо. Используйте useRef - получаете ссылку на экземпляр своего редактора, у него там свойство document есть, нужного вам iframe'а.

UPD. https://codesandbox.io/s/j3oy0q1219

Не надо наследования. Делайте обёртку для основного компонента, которая будет передавать новый обработчик в качестве параметра. А основной компонент будет устанавливать переданный обработчик, или, если его нет, собственный. Например.

Положить в стейт фильтры - массив объектов, содержащих имя свойства, по которому выполняется фильтрация, текущее значение, массив значений, доступных для выбора:

filters: [
  { field: 'bg', value: '', options: [ 'black', 'white' ] },
  { field: 'color', value: '', options: [ 'red', 'green' ] },
],

На основе этого массива создать элементы фильтров:

filters.map((n, i) => (
  <label>
    {n.field}:
    <select data-index={i} onChange={this.onChange}>
      <option value="">none</option>
      {n.options.map(n => <option>{n}</option>)}
    </select>
  </label>
))

onChange = e => {
  const index = +e.target.dataset.index;
  const value = e.target.value;

  this.setState(prevState => ({
    filters: prevState.filters.map((n, i) => index === i ? { ...n, value } : n)
  }));
}

Получить отфильтрованные данные:

const filteredData = filters.reduce((acc, n) => {
  return n.value
    ? acc.filter(m => m[n.field].includes(n.value))
    : acc;
}, data);

Вместо полных данных отобразить отфильтрованные.

Сделайте кастомный фильтр, с обработчиками onChange и onKeyPress, в которых и будет происходить переключение функции фильтрации. Например, так (поле lastName, посмотреть в деле можно вбивая короткие слова, которые являются частью более длинных - такие как war, son, comb, sign, child, work, can и т.п.).

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

у меня много столбцов, плюс к этому много таблиц, и логику фильтра нужно применить ко всему

Ну так сделайте компонент-обёртку для этой таблицы, который будет задавать дефолтный компонент фильтра и дефолтную же функцию фильтрации - их вы можете взять из моего примера.

UPD. https://codesandbox.io/s/nn1z53jn4l (только первые три поля, у последнего фильтр оставлен переопределённым).

isLoaded: false,

if (!isloaded) {

Так как всё-таки правильно - Loaded или loaded?

UPD. Исправлено.

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

Я начинающий

Думаете, это каким-то образом оправдывает ваше нежелание читать документацию? Никак нет, идите и читайте.

<Map instanceRef={map => this.map = map}>

Attempted import error: 'CreateGlobalStyle' is not exported from 'styled-components'.

Ясно.

Разницу между CreateGlobalStyle и createGlobalStyle самостоятельно разглядеть сможете?

class App extends React.Component {
  state = {
    music: musicButton,
  }

  onClick = e => {
    if (this.audio) {
      this.audio.pause();
    }
    this.audio = new Audio(e.target.dataset.url);
    this.audio.play();
  }

  render() {
    return (
      <div>
        {this.state.music.map(n => (
          <button onClick={this.onClick} data-url={n.url} key={n.numButton}>{n.soundsName}</button>
        ))}
      </div>
    );
  }
}

modals.entries() судя по документации должен предоставить [key, value]

Нет, не должен. Он итератор возвращает, а не массив. Так что

[...modals.entries()].map(([ id, modal ]) => (

))

Так же, как и в любой другой компонент. А примеры использования пропсов можете посмотреть в документации.

UPD. Глянул код - так у вас же часть работы уже сделана. Некоторые из компонентов уже принимает пропсы - Container, например, или Wrapper. Возьмём Wrapper - у него есть itemWidth и itemHeight. Ну и отлично:

<Wrapper itemHeight="300px">

Говорите, дефолтное значение надо? Ну так пусть вместо height: ${p => p.itemHeight}; будет height: ${p => p.itemHeight || '200px'};, например. Или можно переписать компонент так:

export const Wrapper = styled.article(({
  itemWidth,
  itemHeight = '200px',
}) => ({
  backgroundColor: '#efefef',
  margin: '5px',
  height: itemHeight,
  width: itemWidth,
}));

Так, что ли?

const ItemComponent = props => (
  <div>
    <p>{props.title}</p>
  </div>
);

...

<Carousel
  items={items}
  ItemComponent={ItemComponent}
/>

UPD. https://codesandbox.io/s/42p1q66589