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