How to define variables in JSX

Question

currently i have this working code..

const HomePage = (props) => {
  return (
    <div className="page-home">
      {
        Object.keys(props.data).map(key => (
          <section key={key}>
            <Link to={props.data[key].route}>{props.data[key].title}</Link>
            <Categories collections={props.data[key].collections} />
          </section>
        ))
      }
    </div>
  )
}

however, i want to use a variable to make the code more readable, but it throws an error Parsing error: Unexpected reserved word 'let'

const HomePage = (props) => {
  return (
    <div className="page-home">
      {
        Object.keys(props.data).map(key => (

          // this is the var defintion that causes the problem
          let obj = props.data[key]

          <section key={key}>
            <Link to={obj.route}>{obj.title}</Link>
            <Categories collections={obj.collections} />
          </section>
        ))
      }
    </div>
  )
}

can someone explain why this is happening, and what the correct way to do this would be?

Does this answer your question? [When should I use \`return\` in es6 Arrow Functions?](https://stackoverflow.com/questions/28889450/when-should-i-use-return-in-es6-arrow-functions) — Emile Bergeron, Mar 16 '20 at 22:18

score 4 · Answer 1 · edited Mar 16 '20 at 21:44

4

You have a syntax issue, below code should work.

const HomePage = (props) => {
  return (
    <div className="page-home">
      {Object.keys(props.data).map(key => {

        // this is the added variable causing the issue
        const obj = props.data[key]

        return (
          <section key={key}>
            <Link to={obj.route}>{obj.title}</Link>
            <Categories collections={obj.collections} />
          </section>
        );

      })}
    </div>
  )
}

edited Mar 16 '20 at 21:44

khan

1,466
8
19

answered Mar 16 '20 at 21:40

ridvanaltun

2,595
2
15
28

a return in a return? – brewster Mar 16 '20 at 21:45
1

To explain, your callback function uses implicit return to return the JSX element. You would need to set your callback to a multiline function to declare the variable `obj`. – khan Mar 16 '20 at 21:45
1

yes. first return returns the component output. The 2nd return returns the values for the .map() loop function – Cornel Raiu Mar 16 '20 at 21:46

Mechanic · Accepted Answer · 2020-03-16T22:21:16.343

You Can only put valid JavaScript expression inside the curly braces in JSX so {let arr=[]} is invalid since it is not an Expression but you can do declaration inside a regular { .. } javascript code block;

const HomePage = (props) => {
  return (
    <div className="page-home">
      {
        Object.keys(props.data).map(key => {
          /*
          this is regular JS function body; even-though it is inside JSX but its body of 
          map's callback function so you can put any js code here 
          */

          let obj = props.data[key]
          return (<section key={key}>
            <Link to={obj.route}>{obj.title}</Link>
            <Categories collections={obj.collections} />
          </section>)
        })
      }
    </div>
  )
}

but what was the problem in your code? you were declaring a variable inside group operator ( ) and again variable declaration isn't an Expression (check all the Operators in JS) hence the compiler yells at you.

console.log((1==2)) //no problem valid expression
console.log((1)) //no problem valid expression
console.log((1*2)) //no problem valid expression
console.log((function a(){ return 1}))  //no problem valid expression

(const a = function(){ return 1})  //!!! problem not an expression

How to define variables in JSX

2 Answers2