score:0

does this work as a functional component? note that you are no longer accessing this.props.data but can instead just directly access the destructured data variable.

const postlist = ({data}) => {
    const posts = data.allmarkdownremark.edges
    return (
      <layout>
        <head title="posts" />
        <div classname={layoutstyles.pageheader}>
          <h2>posts</h2>
          <span>just my ramberlings</span>
        </div>
        {posts.map(({ node }) => {
          const title = node.frontmatter.title || node.fields.slug
          return (
            <div classname={postpagestyles.postitem} key={node.fields.slug}>
              <div classname={postpagestyles.postitemtitle}>
                <h2>{title}</h2>
                <span>posted on {node.frontmatter.date}</span>
              </div>
              <div>
                <p>{node.excerpt}</p>
                <link to={`${node.fields.slug}`}>
                  <span>continue reading</span>
                  <span role="img"> 👉🏼</span>
                </link>
              </div>
            </div>
          )
        })}
      </layout>
    )
  }

  export default postlist

export const query = graphql`{...}`

score:1

i have managed to resolve this. after much googling.

const postlist = props => {
    const { currentpage, numpages } = props.pagecontext
    const isfirst = currentpage === 1
    const islast = currentpage === numpages
    const prevpage = currentpage - 1 === 1 ? '/' : (currentpage - 1).tostring()
    const nextpage = (currentpage + 1).tostring()

    const posts = props.data.allmarkdownremark.edges

    return (
        <layout>
            <head title="posts" />
            <div classname={layoutstyles.pageheader}>
                <h2>posts</h2>
                <span>just my ramberlings</span>
            </div>
            {posts.map(({ node }) => {
                const title = node.frontmatter.title || node.fields.slug
                return (
                    <div classname={postpagestyles.postitem}>
                        <div classname={postpagestyles.postitemtitle}>
                            <h2>{title}</h2>
                            <span>posted on {node.frontmatter.data}</span>
                        </div>
                        <div>
                            <p>{node.excerpt}</p>
                            <link to={`${node.fields.slug}`}>
                                <span>continue reading</span>
                                <span role="img"> 👉🏼</span>
                            </link>
                        </div>
                    </div>
                )
            })}

            {!isfirst && (
                <link to={prevpage} rel="prev">
                    ← previous page
                </link>
            )}
            {!islast && (
                <link to={nextpage} rel="next">
                    next page →
                </link>
            )}

            {array.from({ length: numpages }, (_, i) => (
                <link
                    key={`pagination-number${i + 1}`}
                    to={`posts/${i === 0 ? '' : i + 1}`}
                >
                    {i + 1}
                </link>
            ))}
        </layout>
    )
}

export default postlist

to use the consts i had to change

const postlist = ({ data }) => {
    const posts = data.allmarkdownremark.edges
    ...

to

const postlist = props => {

    const posts = props.data.allmarkdownremark.edges

which then allowed me to use const { currentpage, numpages } = props.pagecontext

score:4

you cannot indeed use const in a class "just like that":

class app extends react.component {
  const a = 2 // will throw a syntax error
  render(){
   return <div>hello world</div>
  }

what you can do is either not use a const to declare the variable as a class field:

class app extends react.component {
   a = "john";

  render(){
   //now you can access a via `this`
   return <div>{`hello ${this.a}`}</div>
  }

or if you don't need it to be to be somehow "bound" to your component, you can declare it outside of the class.

const a = "john"

class app extends react.component {
  render(){
   //you can simply access `a` 
   return <div>{`hello ${a}`}</div>
  }

Related Query

More Query from same tag