react

Warning: `value` prop on `input` should not be null.

Хорошо бы понять как быстро искать такую ошибку, как быстро понять что не так.

Вариант 1 - изучить вывод Warning в консоли вручную

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

Наблюдается такая ситуация. Раздача нормальных (т.е. разных id) проблему решает.

The resource from “http://localhost:8080...” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

Возможная причина

Убедитесь, что на порту 8080 не запущена какая-то другая система (например jenkins, просто откройте ссылку на runtime.js в новой вкладке), которая естественно не готова отдавать вам эти js-файлы.
Остановите эту систему и ещё раз запустите dev-server.

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

Довольно часто возникает задача добавть/удалить класс элементу в React по какому-либо переключателю, пусть даже, по одной кнопке на основе state. В примере применяем класс на компонент, по которому происходит клик.

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

Базования идея (требуется установить npm-пакет dotenv):

Ставим через npm query-string и делаем как-то так:

import queryString from 'query-string';
// .........


let getParams = queryString.parse(props.location.search);
let perPage  = getParams.perpage

Обратите внимание, что для набора пропосов:

id="call_to_action_selectbox"
value={props.entityData.call_to_action || ''}
onChange={handleButtonTextChange}
inputProps={{
  name: 'call_to_action',
  id: 'call_to_action',
}}

selectbox из материал ui построит такой html (в моем случае это было так), что id кликабельного блока (который и показывает выпадающий список) будет написан как:

select-call_to_action

Далее идея простая:

uncaught typeerror dispatch is not a function

Если вы используете mapDispatchToProps без mapStateToProps , то просто передайте null первым аргументов в connect():

const mapDispatchToProps = dispatch =>
    bindActionCreators(
        {
            getCm,
            deleteCm
        },
        dispatch
    );


export default connect(
    null,
    mapDispatchToProps
)(CmList);

Warning Failed prop type: The prop `children` is marked as required in `ForwardRef(ButtonGroup)`

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

<ButtonGroup fullWidth >
// тут должно что-то быть
</ButtonGroup>