Ошибка: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: объект в ReactJS

Question

Я относительно новичок в ReactJS и только начал делать портфельный проект. Когда я запускаю программу, она не показывает никаких ошибок в редакторе, но показывает следующую ошибку в браузере.

Ошибка: недопустимый тип элемента: ожидается строка (для встроенных компонентов ) или класс / функция (для составных компонентов), но получил: объект. Скорее всего, вы забыли экспортировать компонент из файла, в котором он определен, или вы перепутали импорт по умолчанию и имена.

Проверьте метод рендеринга HomePage.

Здесь Моя Домашняя страница. js

import React from 'react';

import Hero from '../components/Hero';
import Carousel from '../components/Carousel';

function HomePage(props) {

    return(
        <div>
            <Hero title={props.title} subTitle={props.subTitle} text={props.text} />
            <Carousel />
        </div>
    );

}

export default HomePage;

Герой. js

import React from 'react';
import Jumbotron from 'react-bootstrap/Jumbotron';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

function Hero(props) {

    return(
        <Jumbotron className="bg-transparent jumbotron-fluid p-0">
            <Container fluid={true}>
                <Row className="justify-content-center py-5">
                    <Col md={8} sm={12}>
                        { props.title && <h1 className="display-1 font-weight-bolder">{props.title}</h1> }
                        { props.subTitle && <h3 className="display-4 font-weight-light">{props.subTitle}</h3> }
                        { props.text && <h3 className="lead font-weight-light">{props.text}</h3> }
                    </Col>
                </Row>
            </Container>
        </Jumbotron>
    );

}
export default Hero;

Карусель. js

import React from 'react';

import Card from '../components/Card';

import pose1 from '../assets/images/pose1.jpg';
import pose2 from '../assets/images/pose2.jpg';
import pose3 from '../assets/images/evverest.jpg';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';

class Carousel extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            items: [
                {
                    id: 0,
                    title: 'Dev Grub',
                    subTitle: 'The cookbook for developers',
                    imgSrc: pose1,
                    link: 'https://devgrub.com',
                    selected: false
                },
                {
                    id: 1,
                    title: 'Garrett Love',
                    subTitle: 'YouTube channel',
                    imgSrc: pose2,
                    link: 'https://www.youtube.com/channel/UCxSITxL2JbF229OGCqieVZw',
                    selected: false
                },
                {
                    id: 2,
                    title: 'Evverest',
                    subTitle: 'A social network for developers',
                    imgSrc: pose3,
                    link: 'https://github.com/garrettlove8/evverest',
                    selected: false
                },
            ]
        }
    }


    handleCardClick = (id, card) => {

        let items = [...this.state.items];

        items[id].selected = items[id].selected ? false : true;

        items.forEach(item => {
            if(item.id !== id) {
                item.selected = false;
            }
        });

        this.setState({
            items
        });
    }


    makeItems = (items) => {
        return items.map(item => {
            return <Card item={item} click={(e => this.handleCardClick(item.id, e))} key={item.id} />
        })
    }


    render() {
        return(
            <Container fluid={true}>
                <Row className="justify-content-around">
                    {this.makeItems(this.state.items)}
                </Row>
            </Container>
        );
    }

}

export default Carousel;

Импорт абсолютно корректен. Как устранить эту ошибку?

ВЫХОД / КОНСОЛЬ:

Answer 1

Если предоставленный вами код завершен, то похоже, что вы ничего не экспортируете в файл Hero.js.

Добавление

export default Hero

в конце Hero.js и должен решить проблему.

Answer 2

Я думаю, что проблема в том, что вы передаете реквизиты на HomePage.js, но, возможно, у вас их нет, или ваши реквизиты - это объект, то есть heroText={props.heroText}, и вы называете его неправильно: props.title вместо props.heroText.title.

Какие реквизиты вы передаете HomePage.js?