setup-files-gatsby-restaurant's People
Forkers
caseywhsetup-files-gatsby-restaurant's Issues
Gatsby Cannot read property 'fixed' of null
According to your tutorials, I wanted to display content from contenful but I got errors for displaying images.
My Gatsby version is 2.3.5 and I only have problem in this part.
TypeError: Cannot read property 'fixed' of null
src/components/HomePageComponents/Product.js:6
3 | import { styles } from "../../utils"
4 | import Img from "gatsby-image"
5 |
6 | export default function Product({ product }) {
7 | const { name, price, ingredients } = product
8 | const { fixed } = product.img
This is my Product.js
import React from "react"
import styled from "styled-components"
import { styles } from "../../utils"
import Img from "gatsby-image"
export default function Product({ product }) {
const { name, price, ingredients } = product
const { fixed } = product.img
return (
<ProductWrapper>
<Img fixed={fixed} className="img" />
<div className="text">
<div className="product-content">
<h3 className="name">{name}</h3>
<h3 className="price">{price}</h3>
</div>
<p className="info">{ingredients}</p>
</div>
</ProductWrapper>
)
}
const ProductWrapper = styled.div`
@media (min-width: 576px) {
display: grid;
grid-template-columns: auto 1fr;
grid-column-gap: 1rem;
}
.img {
border-radius: 0.5rem;
}
.product-content {
display: flex;
justify-content: space-between;
font-size: 1.4rem;
text-transform: uppercase;
}
.name {
color: ${styles.colors.mainYellow};
margin-top: 0.5rem;
}
.price {
color: ${styles.colors.mainYellow};
margin-top: 0.5rem;
}
.info {
margin-top: 0.5rem;
word-spacing: 0.2rem;
text-transform: lowercase;
}
`
this is my Menu.js
import React from "react"
import Product from "./Product"
import { StaticQuery, graphql } from "gatsby"
import { Section, Title } from "../../utils"
import styled from "styled-components"
// import { Link } from "gatsby"
export default function Menu() {
return (
<Section>
<Title title="Featured items" message="Little taste" />
<ProductList>
<StaticQuery
query={graphql`
{
items: allContentfulMenu {
edges {
node {
name
price
id
ingredients
img {
fixed(width: 150, height: 150) {
...GatsbyContentfulFixed_tracedSVG
}
}
}
}
}
}
`}
render={data => {
return data.items.edges.map(item => {
return <Product key={item.node.id} product={item.node} />
})
}}
/>
</ProductList>
</Section>
)
}
const ProductList = styled.div`
margin: 3rem 0;
display: grid;
grid-template-columns: 100%;
grid-row-gap: 3rem;
@media (min-width: 576px) {
grid-template-columns: 95%;
}
@media (min-width: 776px) {
grid-template-columns: 80%;
justify-content: center;
}
@media (min-width: 992px) {
grid-template-columns: 1fr 1fr;
grid-gap: 2rem;
}
`
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.