react

import { makeStyles } from '@material-ui/core/styles';
//............


const useStyles = makeStyles(theme => ({
  '@global': {
    body: {
      backgroundColor: theme.palette.common.white,
    },
  },
  paper: {
    marginTop: theme.spacing(8),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  avatar: {
    margin: theme.spacing(1),
    backgroundColor: theme.palette.secondary.main,
  },
  form: {
    width: '100%', // Fix IE 11 issue.
    marginTop: theme.spacing(1),
  },
  submit: {
    margin: theme.spacing(3, 0, 2),
  },
}));

Скорее всего проблема в том, что какой-то компоненты вызвается с неправильно или вообще отсутствует (убедитесь что не используете устаревший пример на новой версии библиотеки)

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Как и сказано в ошибке, проблема может быть в том, что вы неправильно импортируете компонента, скажем тот, что экспортирован со словом default Надо импортировать не так:

"export 'ControlLabel' was not found in 'react-bootstrap'
warning in ....

"export 'Grid' was not found in 'react-bootstrap'
warning in ...

"export 'MenuItem.......' was not found in 'react-bootstrap'
warning in .......

Grid -> Container
MenuItem -> Dropdown.Item
ControlLabel -> FormLabel

Причем для 1 и 3 компонента можно просто использовать as при импорте...

Ошибка типа:

NotFoundError: Node was not found......
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

возникает если DOM элемент удаляет со страницы не реактом, а сторонней библиотекой.

В некоторых случаях можно просто подставить пустую строку (напр. если эти атрбиты необходимы для вашего CSS фреймворка наподобие uikit, т.е. вместо:

<div class="uk-alert-danger" uk-alert>
	<a class="uk-alert-close" uk-close></a>
	<p>Ошибка авторизации: неверное имя пользователя или пароль!</p>
</div>

Пишем:

Родитель:

Если вам не надо перехватывать ввод в поле, но нужно запоминать состояние, то используйте подход вроде:

Если значений мало можно просто завести динамически определяемые переменные, напр. в данном случае одну (var text ):

import React from 'react';
import jswl from 'js-wrapper-lib';

class SubmitButton extends React.Component {

  render() {
    var text = jswl.isEmpty(this.props.name) ? 'default_text!' : this.props.name;
    return (
        <button type="submit" class="uk-button uk-button-primary uk-border-pill uk-width-1-1">
            {text} 
        </button>
    );
  }
}

export default SubmitButton;

1. Простой: https://github.com/the-road-to-learn-rea...
2. С роутами: https://github.com/Codaisseur/React-Rout...
3. Проcмотрщик знаменитого djvujs (без роутов): https://github.com/RussCoder/djvujs/tree...