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/> **THIS IS THE PART THAT WENT WRONG**
</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
}
}
}
}
}
`
Bio.js
import React from "react"
import profile_pic from "../images/profile_pic.png"
class Bio extends React.Component{
render (){
return(
<>
<h3 style={{
fontFamily: `'Montserrat', sans-serif`,
fontWeight: 400,
marginTop:`1rem`,
color: `#f47c48`,
}}>Bio</h3>
<img src={profile_pic} alt="profile_pic" style={{
width:`100px`,
}}></img>
<p style={{
fontFamily: `'Montserrat', sans-serif`,
}}>
Former student of Singapore Polytechnic, dropped out at the end of year two, had been
learning Web-Development since 2016. My goal is to become a web developer in an English speaking country.
</p>
<h5 style={{
fontFamily: `'Montserrat', sans-serif`,
}}>Find me at :</h5>
<div>
<a href="https://www.linkedin.com/in/xiang-zhou-03547755/" rel='noopener noreferrer' target="_blank" style={{backgroundColor: `#fff5e8`,color:`black`,textDecoration:`none`,}}>LinkedIn</a>
<a href="https://github.com/zhouxiang19910319" rel='noopener noreferrer' target="_blank" style={{backgroundColor: `#fff5e8`,color:`black`,textDecoration:`none`,}}>github</a>
<a href="https://medium.freecodecamp.org/the-most-difficult-things-about-learning-to-code-by-yourself-b24ac8c3c23a "
rel='noopener noreferrer' target="_blank" style={{backgroundColor: `#fff5e8`,color:`black`,textDecoration:`none`,}}>medium</a>
<a href="https://twitter.com/zh0ux1ang" rel='noopener noreferrer' target="_blank" style={{backgroundColor: `#fff5e8`,color:`black`,textDecoration:`none`,}}>twitter</a>
<a href="https://www.freecodecamp.org/zhouxiang19910319" rel='noopener noreferrer' target="_blank" style={{backgroundColor: `#fff5e8`,color:`black`,textDecoration:`none`,}} >freeCodeCamp</a>
</div>
</>
)
}
}
export default Bio
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?
thanks in advanced.