React noob seeking help. (syntax or maybe some more error)

JavaScript
1

I got these error messages when I am trying to build my blog using gatsby:

/Users/zhouxiang/Desktop/work/On Going Projects/slowpacedcoding_gatsby/src/components/blog.js
5:1 error Your render method should have return statement react/require-render-return
7:5 error Expected an assignment or function call and instead saw an expression no-unused-expressions
31:7 error Expected an assignment or function call and instead saw an expression no-unused-expressions

And here is my code:

import React from "react"
import { Link,graphql,StaticQuery } from "gatsby"
import 'bootstrap/dist/css/bootstrap.css'

class Blog extends React.Component{
  render(){
    <StaticQuery
  query={
     graphql`
  query BlogIndexQuery{
      allMarkdownRemark
      (sort: { fields: [frontmatter___date], order: DESC })
      {
        edges{
          node{
            id
            frontmatter{
              path
              title
              date
              author
            }
          }
        }
      }
    }
`
  }
  render={
    data=>{
      <>
      <h3
      style={{
        fontFamily: `'Montserrat', sans-serif`,
        fontWeight: 700,
      }}
      >Posts</h3>
      {data.allMarkdownRemark.edges.map(post=>(
        <div>
        <div key = {post.node.id}>
          <small
          style={{
            fontFamily: `'Montserrat', sans-serif`,
            fontWeight: 300,
            color: `#828282`,
          }}
          >{post.node.frontmatter.date}</small>
          <br></br>
          <h4
          style= {{
            display: `inline-block`,
            fontFamily: `'Montserrat', sans-serif`,
            fontWeight: 400,
            color: `#f47c48`,
          }}
          >{post.node.frontmatter.title}</h4>
        </div>
          <Link to={post.node.frontmatter.path} 
          style={{
            padding:0,}}
            >Read More</Link>
          <hr></hr>
        </div>
      ))}
      </>
    }
  }
/>
  }
}

export default Blog
2

Start by tackling the first error first

5:1 error Your render method should have return statement react/require-render-return

You’re not currently returning anything from the render function

3

actually this is not how you have to do graphql query from front end. You should write query separately then you can pass through props to your react component to renter that, there is a great course from freecodecamp uploaded on youtube for react,node,graphql and mongodb. .

1 Like