CODEWITHSUNDEEP
reactjs
Joseph Akayesi
Joseph Akayesi

Reputation: 471

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. ReactJS

Can't resolve this issue. Whenever I import Layout I get the error above. When I import other components they work just fine. At first I thought the name Layout was reserved so I changed it but still got the same error.

App.js

import React, { Component } from 'react';
import Layout from "./components/Layout/Layout";

class App extends Component {
  render() {
    return (
      <div>
        <Layout />
      </div>
    )
  }
}

export default App

Layout.js

import React, { Component } from 'react'
import Footer from '../Footer/Footer'
import Quotes from '../Quotes/Quotes'
import './Layout.css'

class Layout extends Component {
    render() {
        return (
            <div className='bgImg'>
                <div className='centered text-center align-items-center justify-content-center'>
                    <Quotes />
                </div>
                <Footer />
            </div>
        )
    }
}

export default Layout

Error Message

Upvotes: 0

Views: 82

Answers (1)

Dor Shinar
Dor Shinar

Reputation: 1512

The error tells you exactly what you should do.
First, make you sure export the components properly:

/* relevant imports */

class Quotes extends Component {
  /* component code */
}

export default Quotes

Second make you use the proper import semantic in your Layout component:

import Quotes from '/path/to/your/component';

instead of 

import {Quotes} from '/path/to/your/component';

Upvotes: 1

Related Questions