CODEWITHSUNDEEP
javascriptreactjs
2K01B5
2K01B5

Reputation: 1121

Rendering a React.Component

Could someone point out what's wrong with this piece of code for rendering a component using React. It keeps throwing an error saying "Element type is invalid ... check render method for App" and I can't see the problem.

import React from 'react';
import ReactDOM from 'react-dom';   
import App from './components/app';

ReactDOM.render(<App />, document.getElementById('container'));

APP

import React from 'react';
import AppActions from '../actions/app-actions';
import Catalog from './app-catalog';

export default class App extends React.Component {
 render(){
    return (
        <div className="container">
            <Catalog />
        </div>
    )   
 }
}

CATALOG

import React from 'react';
import AppStore from '../stores/app-store';
import CatalogItem from './app-catalog-item';

function getCatalog(){
 return {items: AppStore.getCatalog()}
};

class Catalog extends React.Component {
 constructor(){
    super();
    this.state = getCatalog();
 }
 render(){
    let items = this.state.items.map(item => {
        return <CatalogItem key={item.id} item={item} /> 
    });
    return (
        <div className="row">
            {items}
        </div>
    )    
 }
}

Any help would be much appreciated.

Upvotes: 0

Views: 111

Answers (2)

Oleksandr T.
Oleksandr T.

Reputation: 77522

Add export to Catalog 

export default class Catalog extends React.Component {
}

because now from catalog there is nothing to import, and when you do

import Catalog from './app-catalog';

you will get undefined and undefined is not valid React component, that's why you get error

Upvotes: 1

Davin Tryon
Davin Tryon

Reputation: 67336

You just need to export default something in Catalog:

export default class Catalog extends React.Component {
...

Otherwise, when you use the import statement nothing will import:

import Catalog from './app-catalog';

Upvotes: 3

Related Questions