Антон Спирин

Если вы используете react-router-dom, то надо использовать именно тот экземпляр history, который использует ваш роутер.

import React, { FC, useEffect } from 'react';
import { RouteComponentProps, withRouter } from 'react-router-dom';

interface OwnProps {
  error: string;
}

type Props = OwnProps & RouteComponentProps<any>;

const HandlerErr: FC<Props> = ({ error, history }) => {
  useEffect(() => {
   const timeout = setTimeout(() => {
     history.push(`/`);
   }, 2000);
 
   return () => { 
     clearTimeout(timeout);
   };
  }, [error]);

  return (
    <>
      <div>{error}</div>
      <div>Contact site administrator</div>
    </>
  );
};

export default withRouter(HandlerErr);

ESLint тут не причем и это не ошибка, а warning. Это плагин styled-components или анализатор, который использует этот плагин в webstorm выкидывает предупреждение, так как у вас не явно объявлен медиа запрос и он не может сопоставить его тип. Предлагаю забить.

Например:

return (
  <Switch>
    <Route exact path="/(users/.+|product/.+|search)?" component={Home} />
    {/* other routes */}
  </Switch>
);

1. Повесить слушатель на onChange, который будет делать соответствующий запрос на сервер. По приходу данные надо отрисовывать. Лучше использовать debounce и проверку минимальной длины строки перед запросом.
2. Повесить на подсказку слушатель onClick и менять в обработчике значение нужного input.

Простой пример реализации подобной логики:

import React, { useState, useRef, useCallback, useMemo } from 'react';
import debounce from 'lodash/debounce';
import { fetchSomeData } from './someplace';

const Example = () => {
  const [results, setResults] = useState([]);
  const inputEl = useRef(null);

  const handleTintClick = useCallback((value) => {
    inputEl.current.value = value;
  }, [inputEl]);

  const handleInputChange = useMemo(() => debounce(e => {
    const { value } = e.target;

    if (value.length < 3) return;

    fetchSomeData(value).then(setResults);
  }, 800), []);

  return (
    <>
      <input ref={inputEl} onChange={handleInputChange} />
      {results.length > 0 && (
        <ul>
          {results.map((result, i) => (
            <li
              onClick={() => hanldeTintClick(result.title}}
              key={result.id}
            >
              {result.title}
            </li>
          )}
        </ul>
      )}
    </>
  );
};

debounce нужен чтобы оптимизировать количество запросов к серверу. Колбек будет вызван только когда пользователь сделает паузу во вводе на 800мс, если это много, то таймаут можно сделать меньше.
useMemo вместо useCallback, чтобы не вызвать debounce каждую перерисовку.

Понятное дело, что в реальном коде вместо ul/li должен быть стилизованный компонент. В документации MateralUI есть примеры использования их компонентов.

Как можно получить ее напрямую в render ?

Так делать нельзя. На момент первого вызова render целевые элементы еще не смонтированы.
Что вы вообще хотите сделать? Возможно, задачу можно решить более изящным путем.

Алгоритм:
1. Вызываем первый alert
2. Получаем undefined
3. Вызываем второй операнд в II
4. Получаем undefined и поэтому возвращаем его не проверяя второй операнд в &&

undefined || undefined && 'до этого места проверка не доходит'

undefined || 'что угодно' // 'что угодно'
undefined && 'что угодно' // undefined

Помимо undefined, подобное справедливо для всего, что кастуется в false.

Почитайте про сборщик модулей webpack и конкретно про webpackDevServer и HtmlWebpackPlugin. Вы можете выполнить npm run eject на тестовом проекте и посмотреть в файлах config/webpack.config.js, config/webpackDevServer.config.js и scripts/start.js как это все настроено и работает.

Если вы выполнитеnpm run build и откройте директорию build/static, то увидите там все сгенерированные файлы.

const result = array.reduce((acc, el, i) => {
  if (i % 2 === 0) {
    acc.push([]);
  }
  acc[acc.length - 1].push(el);
  return acc;
}, []);

Смотрите содержимое store. Вы либо пишите туда циклические структуры данных, либо пишите какой-нибудь объект сторонней библиотеки содержащий подобные данные.
Если пишите в store собственный хелпер, использующий сторонние библиотеки, который пересоздается на клиенте, то реализуйте в нем метод toJSON:

toJSON() {
  return '[Helper Name]';
}

var x = 1;
var y = 2;

function sum(x, y) {
  return x + y;    
}

function show() {
  document.getElementById("r").innerHTML = sum(x, y);
}

show();

require(`./commands/${f}`);

Шаблонные строки

Serving apps with client side routing

req.query

Например:

const PrivateRoute = ({ component: Component, render, isSignedIn, ...rest }) => (
  <Route
    {...rest}
    render={props => {
      if (!isSignedIn) return (
        <Redirect
          to={{
            pathname: '/login',
            state: { referrer: props.history.location.pathname },
          }}
        />
      );

      if (render) return render({ ...props });

      return <Component {...props} />;
    }}
  />
);

const mapStateToProps = (state) => ({
  isSignedIn: isSignedInSelector(state),
});

export default connect(mapStateToProps)(PrivateRoute);

referrer тут передается для возможности возврата на целевую страницу после логина.

import React, { useState, useCallback } from 'react';
import WeatherPage from './WeatherPage';
import Flag from './Flag';

const FlagsList = ({ onItemClick, flagsList }) => (
  <ul>
    {flagsList.map(flag => <Flag key={flag.id} flag={flag} onClick={onItemClick} />)}
  </ul>
);

const Example = () => {
  const [shouldShowWeather, setShouldShowWeather] = useState(false);
  const toggleShowWeather = useCallback(() => {
    setShouldShowWeather(state => !state);
  }, []);

  return (
    <>
      {shouldShowWeather && <WeatherPage />}
      <FlagsList flagsList={flagsList} onItemClick={toggleShowWeather} />
    </>
  );
};

Настоятельно рекомендую изучить документацию библиотеки и пройти туториал.

Функция передаваемая первым аргументом в setState в классовых компонентах должна возвращать объект, обновляющий какие-либо свойства объекта состояния. В вашем случае это объект содержащий свойство data. У вас в примерах, в первом случае возвращался массив, во втором был невалидный код.

Ваш код обновления состояния можно сократить до:

this.setState(state => ({
  data: state.data.filter(el => el.id !== id), 
}));