0xD34F

Добавьте свойство, которое будет отвечать за порядок элементов и переключайте его значение. Или, если важен только внешний вид, а не реально расположение элементов, задайте родителю display: flex и вешайте ему класс, который будет переопределять order у дочерних элементов.

Уберите дополнительный Router.

Вместо path="/dashboards/component" лучше писать path={`${props.match.url}/component`}.

вот так

https://jsfiddle.net/gxab98nq/

Сделать объект с транслитерированными символами:

const letters = {
  'а': 'a',
  'б': 'b',
  'в': 'v',
  ...
};

В стейте хранить оригинальное и транслитерированное значения:

state = {
  value: '',
  translitValue: '',
}

При изменении содержимого инпута с оригинальным значением обновлять оба:

onChange = ({ target: { value } }) => {
  this.setState({
    value,
    translitValue: value.toLowerCase().split('').map(n => letters[n] || n).join(''),
  });
}

<input value={this.state.value} onChange={this.onChange} />
<input value={this.state.translitValue} readOnly />

https://jsfiddle.net/oeL4u68t/

Данные вкладок кладём в массив:

const items = [
  { title: 'London', content: 'London is the capital city of England.' },
  { title: 'Paris', content: 'Paris is the capital of France.' },
  { title: 'Tokyo', content: 'Tokyo is the capital of Japan.' },
];

Делаем компонент, отображающий вкладку. Тут ничего сложного - просто выводятся переданные данные:

const TabContent = ({ title, content }) => (
  <div className="tabcontent">
    <h3>{title}</h3>
    <p>{content}</p> 
  </div>
);

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

function Tabs({ items }) {
  const [ active, setActive ] = React.useState(null);

  const openTab = e => setActive(+e.target.dataset.index);

  return (
    <div>
      <div className="tab">
        {items.map((n, i) => (
          <button
            className={`tablinks ${i === active ? 'active' : ''}`}
            onClick={openTab}
            data-index={i}
          >{n.title}</button>
        ))}
      </div>
      {items[active] && <TabContent {...items[active]} />}
    </div>
  );
}

https://jsfiddle.net/0dhaojze/

this.setState({

Даже думать не хочу, возможна ли такая ситуация, когда сразу после вызова setState для результата одного запроса начинает обрабатываться другой. Не будем рисковать потерей результатов и используем функциональное обновление. Ну и если хотите последовательные запросы, тогда надо ждать конца предыдущего, чтобы сделать следующий, async/await позволит код упростить.

async componentDidMount() {
  for (const url of urlList) {
    const
      dataAPI = [ ...this.state.dataAPI, await servicesAPI.getResourse(url) ],
      loaded = dataAPI.length === urlList.length;

    await new Promise(r => this.setState({ dataAPI, loaded }, r));
  }
}

Данные слайдов кладём в массив:

const items = [
  { id: ..., title: '...', img: '...' },
  { id: ..., title: '...', img: '...' },
  ...
];

И передаём их в компонент сладйера:

function Slider({ items }) {
  const [ active, setActive ] = React.useState(0);
  const { length, [active]: slide } = items;

  const next = e => setActive((active + +e.target.dataset.step + length) % length);
  const goTo = e => setActive(+e.target.dataset.index);

  return (
    <div>
      <div className="slideshow-container">
        <div className="mySlides fade">
          <div className="numbertext">{active + 1} / {length}</div>
          <img src={slide.img} />
          <div className="text">{slide.title}</div>
        </div>
        <a className="prev" onClick={next} data-step={-1}>&#10094;</a>
        <a className="next" onClick={next} data-step={+1}>&#10095;</a>
      </div>
      <div className="dots">
        {items.map((n, i) => (
          <span
            key={n.id}
            className={`dot ${i === active ? 'active' : ''}`}
            onClick={goTo}
            data-index={i}
          ></span>
        ))}
      </div>
    </div>
  );
}

https://jsfiddle.net/yht2w68L/

Одним из способов получения ссылки на элемент является использование коллбэка - внутри которого можете заполнять интересующий вас массив:

function App() {
  const [ count, setCount ] = useState(3);
  const updateCount = ({ target: { dataset: { change } } }) =>
    setCount(Math.max(0, count + +change));

  const refs = useRef([]);
  const logRefs = () => console.log(refs.current);

  useEffect(() => {
    refs.current.length = count;
  }, [ count ]);

  return (
    <div>
      <button onClick={updateCount} data-change={-1}>-</button>
      {count}
      <button onClick={updateCount} data-change={+1}>+</button>
      <button onClick={logRefs}>log refs</button>
      {Array.from({ length: count }, (n, i) => (
        <div ref={el => refs.current[i] = el}>
          {Math.random() * 1000 | 0}
        </div>
      ))}
    </div>
  );
}

setState выполняет лишь поверхностное слияние, если вам требуется обновлять вложенные объекты - следует копировать все их свойства:

this.setState({
  productToCart: {
    ...this.state.productToCart,
    color,
  },
});

Добавьте в объект с описанием столбца check свойство render:

{
  title: 'Статус',
  key: 'check',
  dataIndex: 'check',
  render: status => status ? 'На работе' : 'Отсутствует',
},

https://jsfiddle.net/s7o4hvcd/

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

UPD. https://jsfiddle.net/4yq5du0r/

const ScrollButton = props => {
  const onClick = () => window.scrollTo({
    top: props.scrollTo,
    behavior: 'smooth',
  });

  return (
    <div className="down" style={{ top: `${props.top}px` }}>
      Scroll to {props.scrollTo}
      <button onClick={onClick}>&#10095;</button>
    </div>
  );
};

const App = () => (
  <div className="container">
    <ScrollButton scrollTo={500} top={50} />
    <ScrollButton scrollTo={1000} top={100} />
    <ScrollButton scrollTo={2000} top={200} />
  </div>
);

.down {
  position: fixed;
}

https://jsfiddle.net/zm0x4ycj/

https://jsfiddle.net/7nqhzj9y/

появляется ошибка в консоли <...> Functions are not valid as a React child.

Видимо, вы пытаетесь рендерить сумму как-то так: {this.countPrice}. А надо {this.countPrice()}. Ну или сделайте countPrice геттером.

Почему price у вас строки? Должны быть числа.

Расчёта суммы - почему возвращаете результат map'а? Это же массив. Переписываем:

countPrice = () => {
  return this.state.productsList.reduce((acc, n) => acc + n.price, 0);
}

В стейте должно быть два свойства - значение инпута и его копия. В обработчике onChange инпута обновляете значение инпута; в обработчиках onClick кнопки и onMouseLeave формы копируете во второе свойство значение инпута, а само его сбрасываете.

Или можете попробовать обойтись одним свойством в стейте, но тогда потребуется добавить ref на инпут. Обрабатывать change в этом случае не надо.

Всё работает так, как и должно. Хотите, чтобы обработчик вызывался при потере фокуса - onChange замените на onBlur.

Импорт React.Component.

Для чего? - Ну, ОЧЕВИДНО, чтобы использовать его при определении классового компонента.

https://jsfiddle.net/g53Led6h/

или

https://jsfiddle.net/g53Led6h/1/