Unable to use const within a class in React

Question

I am following this tutorial

https://nickymeuleman.netlify.com/blog/gatsby-pagination#navigate-to-previousnext-page

Everything is working fine, but I am unable to add const within the class. I am using VSC to code up the site, it just doesn't seem to like it.

This is the class I am trying to place the consts within. As I am new to React I am bit lost on finding a solution without using a plugin.

export default class PostList extends React.Component {
    render() {
        const posts = this.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.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>
        )
    }
}

Which line number? Coz you have different `const` keywords - around 2. Both seems to be valid... Also I would say this is one of the worst pieces of code: `{\`${node.fields.slug}\`}` can be changed to `{node.fields.slug}`. — Praveen Kumar Purushothaman, Oct 10 '19 at 08:46
I am trying to place them above `render() {` I have just updated the tut link to the anchor point where I am stuck — mrpbennett, Oct 10 '19 at 08:47
There you go... You can't put it there. Coz it's the class body. Just use the `=` symbol coz that becomes a class property. — Praveen Kumar Purushothaman, Oct 10 '19 at 08:48
@mrpbennett `class BlogList extends React.component { const { currentPage, numPages } = this.props.pageContext` - This from your link is invalid. You gotta report this to the author — Praveen Kumar Purushothaman, Oct 10 '19 at 08:50
Can you make it a functional component without a render method? — ksav, Oct 10 '19 at 08:53
Question is, why you wanna move it above the render function? — Praveen Kumar Purushothaman, Oct 10 '19 at 08:53
vs code does not give any errors but you do get a missing key warning on element: `
` when you create element in a map you have to give it a unique key: `
` — HMR, Oct 10 '19 at 08:57

score 4 · Answer 1 · answered Oct 10 '19 at 09:04

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>
  }

score 1 · Answer 2 · answered Oct 12 '19 at 16:43

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

ksav · Answer 3 · 2019-10-10T10:17:10.280

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`{...}`

edited Oct 10 '19 at 10:17

answered Oct 10 '19 at 08:58

ksav

20,015
6
46
66

yup still getting the same behaviour – mrpbennett Oct 10 '19 at 09:13
This seems to be working for me. Are you sure you aren't still trying to access `this.props.data`? – ksav Oct 10 '19 at 10:18
oh sorry I meant same behaviour as my site. ....so this is working as intended. – mrpbennett Oct 10 '19 at 10:22
I'm a bit confused as to where the error is. Are you just saying that vscode doesn't like the code in your question? – ksav Oct 10 '19 at 13:08
I get the following error when I add the consts into the component `TypeError: undefined is not an object (evaluating '_this.props')` I am placing them above `const posts = data.allMarkdownRemark.edges` – mrpbennett Oct 10 '19 at 13:39

Unable to use const within a class in React

3 Answers3

Linked