I cant resolve your demo code please advice
Closed this issue · 2 comments
Hi
I'm new to React and loved your photo class
I cant 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 I create this:
// 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 the line in the renderar <DemoPhotos />
Please advice I love you component!
Best Regards Erik
@SwapCursor Hi Erik!
The main issue, that you didn't export anything from "./DemoPhotos.jsx";
, but you assume it, because as I see you did import DemoPhotos from "./DemoPhotos.jsx";
I have made for you test environment with your code and my fix https://codesandbox.io/s/lucid-volhard-5ej04?file=/src/DemoPhotos.jsx:359-423
Thanks a bunch the export default demoPhotos was the problem