Gatsby/GraphQL/React component

mrchow19910319 · April 8, 2019

**Goal:Make the site looks like this: left hand side is all the blog posts, right hand site is bio**

Right now what I did was I inserted Post.js and Bio.js into index.js.

index.js:

import React from "react"
import { Link } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
import 'bootstrap/dist/css/bootstrap.css';
import Container from 'react-bootstrap/Container'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import Bio from '../components/bio'
import Blog from '../components/blog'



const IndexPage = () => (
  <Layout>
    <SEO title="slowpacedcoding" keywords={[`slowpacedcoding`, `programming`, `Matt Zhou`, `gatsbyJS`,`web development`,`zhouxiang19910319`,`web programming`]} />

    <Container>
      <Row>
        <Col xl={6} lg={6} md={12} sm={12} xs={12}>
          {/* BLOG POST SECTION IS HERE! */}
          <Blog/>
        </Col>

        <Col xl={6} lg={6} md={12} sm={12} xs={12}>
          {/* BIO SECTION IS HERE! */}
          <Bio />
        </Col>
      </Row>
     </Container>


  </Layout>
)

export default IndexPage

Blog.js

import React from "react"
import { Link } from "gatsby"
// import Layout from "../components/layout"
import 'bootstrap/dist/css/bootstrap.css'

class Blog extends React.Component{
  render({data}){
    return(
      <>
      <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

export const pageQuery = graphql`
  query BlogIndexQuery{
      allMarkdownRemark
      (sort: { fields: [frontmatter___date], order: DESC })
      {
        edges{
          node{
            id
            frontmatter{
              path
              title
              date
              author
            }
          }
        }
      }
    }
`

the problem is Bio.js can be displayed correctly. But Blog.js cannot.
it gives out these errors:


×
TypeError: Cannot read property 'data' of undefined
Blog.render
src/components/blog.js:7
   4 | import 'bootstrap/dist/css/bootstrap.css'
   5 | 
   6 | class Blog extends React.Component{
>  7 |   render({data}){
   8 |     return(
   9 |       <>
  10 |       <h3

how do I parse those data in, so that it can be displayed correctly?

@ [husseyexplores](https://www.freecodecamp.org/forum/u/husseyexplores)

thanks in advanced.