CODEWITHSUNDEEP
javascriptreactjsjsx
brewster
brewster

Reputation: 4492

How to define variables in JSX

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?

Upvotes: 0

Views: 2046

Answers (2)

Mechanic
Mechanic

Reputation: 5380

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

Upvotes: 4

ridvanaltun
ridvanaltun

Reputation: 3020

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

Upvotes: 4

Related Questions