Cant start React simple app I get Error: Element type is invalid: expected a string

Viewed 36

I'm new to React and found this react-photo-feed by lkazberova I can't get it to work I have created a demoPhotos like this:

import React from "react";
import ReactDOM from "react-dom";
import PhotoGrid from "react-photo-feed";
import "react-photo-feed/library/style.css";

const demoPhotos = [
    {
        id : 1, src : "https://farm5.staticflickr.com/4077/34824083444_f5f050e31c_n.jpg",
        bigSrc : "https://farm5.staticflickr.com/4077/34824083444_f5f050e31c_b.jpg"
    },
    {
        id : 2, src : "https://farm5.staticflickr.com/4240/35527849422_25a0a67df6_n.jpg",
        bigSrc : "https://farm5.staticflickr.com/4240/35527849422_25a0a67df6_b.jpg"
    },
    {
        id : 3, src : "https://farm5.staticflickr.com/4077/34824083444_f5f050e31c_n.jpg",
        bigSrc : "https://farm5.staticflickr.com/4077/34824083444_f5f050e31c_b.jpg"
    },
    {
        id : 4, src : "https://farm5.staticflickr.com/4240/35527849422_25a0a67df6_n.jpg",
        bigSrc : "https://farm5.staticflickr.com/4240/35527849422_25a0a67df6_b.jpg"
    },
    {
        id : 5, src : "https://farm5.staticflickr.com/4077/34824083444_f5f050e31c_n.jpg",
        bigSrc : "https://farm5.staticflickr.com/4077/34824083444_f5f050e31c_b.jpg"
    },
    {
        id : 6, src : "https://farm5.staticflickr.com/4240/35527849422_25a0a67df6_n.jpg",
        bigSrc : "https://farm5.staticflickr.com/4240/35527849422_25a0a67df6_b.jpg"
    },
    {
        id : 7, src : "https://farm5.staticflickr.com/4077/34824083444_f5f050e31c_n.jpg",
        bigSrc : "https://farm5.staticflickr.com/4077/34824083444_f5f050e31c_b.jpg"
    }
];
ReactDOM.render(
    <div>
        <PhotoGrid columns={3} photos={demoPhotos} />
    </div>,
    document.getElementById('root')
);

The in my App.js::

// src/js/components/App.jsx
import React, { Component } from "react";
import DemoPhotos from "./DemoPhotos.jsx";
class App extends Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        const { addToast } = this.props.actions;
        addToast({ text: "Hello, World!" });
    }

    render() {
        return (
            <main>
                <div className="row mt-5">
                    <div className="col-md-4 offset-md-1">
                        <h2>Add a new article</h2>
                        <DemoPhotos />
                    </div>
                </div>
            </main>
        );
    }
}

export default App;

When I run that I get: ×

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

Check the render method of App.

The problem is this line in the renderar <DemoPhotos /> Please advice I love this foto component!

Best Regards Erik

Here's a Picture

1 Answers

That error message says what the issue is obviously. It's due to you're not returning string or class/function components inside DemoPhotos.jsx file. It's not a renderable react component. Please update DemoPhotos.jsx file like below. Please check this documentation

import React from "react";
import PhotoGrid from "react-photo-feed";
import "react-photo-feed/library/style.css";

const photos = [
    {
        id : 1, src : "https://farm5.staticflickr.com/4077/34824083444_f5f050e31c_n.jpg",
        bigSrc : "https://farm5.staticflickr.com/4077/34824083444_f5f050e31c_b.jpg"
    },
    {
        id : 2, src : "https://farm5.staticflickr.com/4240/35527849422_25a0a67df6_n.jpg",
        bigSrc : "https://farm5.staticflickr.com/4240/35527849422_25a0a67df6_b.jpg"
    },
    {
        id : 3, src : "https://farm5.staticflickr.com/4077/34824083444_f5f050e31c_n.jpg",
        bigSrc : "https://farm5.staticflickr.com/4077/34824083444_f5f050e31c_b.jpg"
    },
    {
        id : 4, src : "https://farm5.staticflickr.com/4240/35527849422_25a0a67df6_n.jpg",
        bigSrc : "https://farm5.staticflickr.com/4240/35527849422_25a0a67df6_b.jpg"
    },
    {
        id : 5, src : "https://farm5.staticflickr.com/4077/34824083444_f5f050e31c_n.jpg",
        bigSrc : "https://farm5.staticflickr.com/4077/34824083444_f5f050e31c_b.jpg"
    },
    {
        id : 6, src : "https://farm5.staticflickr.com/4240/35527849422_25a0a67df6_n.jpg",
        bigSrc : "https://farm5.staticflickr.com/4240/35527849422_25a0a67df6_b.jpg"
    },
    {
        id : 7, src : "https://farm5.staticflickr.com/4077/34824083444_f5f050e31c_n.jpg",
        bigSrc : "https://farm5.staticflickr.com/4077/34824083444_f5f050e31c_b.jpg"
    }
];

class DemoPhotos extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
          <div>
               <PhotoGrid columns={3} photos={photos} />
          </div>
        );
);

export default DemoPhotos;
Related