How to avoid 'eval' in this react component?

Question

I am using Gatsby static page generator to create a static website. I have created a component like this:

const Subject = ({data, location, pageContext) => {
    const currentPage = eval("pagecontext.num" + (pageContext.queryfor) + "s")
    return (
        console.log(currentPage) //returns page number as expected
    )
}

As you can see, I am using eval to construct a variable based on some strings and another variable. The code runs perfectly, as expected but I get a warning:

warn ESLintError:
E:\Build\gatsby\src\components\subject.js
warning  eval can be harmful  no-eval

Them I read a bit about how eval should never be used as it is dangerous. How can I avoid using eval in my code? Thanks.

Answer 1

Switch to bracket notation:

const Subject = ({data, location, pageContext) => {
    const currentPage = pageContext[`num${pageContext.queryfor}s`])
    return (
        console.log(currentPage) //returns page number as expected
    )
}