Реактивно проверить метод рендеринга «Modalheader». Ошибка: тип элемента недействителен ⇐ Javascript

[Anonymous]

Я следую за этот учебник, который стареет 2021:
https://www.digitalocean.com/community/ ... pplication -Усинг-django-and-react < /p>
Но я получил эту ошибку: < /p>
ERROR
Element 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.

Check the render method of `ModalHeader`.
Error: Element 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.

Check the render method of `ModalHeader`.
at createFiberFromTypeAndProps (http://localhost:3000/static/js/bundle.js:14142:24)
at createFiberFromElement (http://localhost:3000/static/js/bundle.js:14153:12)
at reconcileChildFibersImpl (http://localhost:3000/static/js/bundle.js:10250:336)
at http://localhost:3000/static/js/bundle.js:10308:31
at reconcileChildren (http://localhost:3000/static/js/bundle.js:11681:47)
at updateFunctionComponent (http://localhost:3000/static/js/bundle.js:11792:5)
at beginWork (http://localhost:3000/static/js/bundle.js:12404:16)
at runWithFiberInDEV (http://localhost:3000/static/js/bundle.js:7745:14)
at performUnitOfWork (http://localhost:3000/static/js/bundle.js:14989:93)
at workLoopSync (http://localhost:3000/static/js/bundle.js:14883:38)
< /code>
Я импортировал "Bootstrap Modal" в файле с именем "modal.js": < /p>
modal.js
import React, { Component } from "react";

import {
Button,
Modal,
ModalHeader,
ModalBody,
ModalFooter,
Form,
FormGroup,
Input,
Label,
} from "reactstrap";

export default class CustomModal extends Component {
constructor(props) {
super(props);
this.state = {
activeItem: this.props.activeItem,
};
}

handleChange = (e) => {
let { name, value } = e.target;

if (e.target.type === "checkbox") {
value = e.target.checked;
}

const activeItem = { ...this.state.activeItem, [name]: value };

this.setState({ activeItem });
};

render() {
const { toggle, onSave } = this.props;

return (

Todo Item



Title



Description





Completed





onSave(this.state.activeItem)}
>
Save



);
}
< /code>
} < /p>
Вся проблема, как кажется, находится в устаревшем «модальном». Какое решение для этого?

Подробнее здесь: https://stackoverflow.com/questions/794 ... is-invalid