1

I recently enrolled in the edX reactjs introduction course, and one of the snippets I saw were:

 <Button id = {0}/>

What do the curly braces surrounding the integer indicate? Is that the ES6 destructuring? Or is that how we embed Javascript in JSX? On the other side, would I see the same result if I ran the same code but without the curly braces around the integer? i.e <Button id= 0/> instead of: <Button id={0}/>

If not, why then ? Thanks everybody.

Badawi
  • 29
  • 4
  • Check here https://stackoverflow.com/questions/43904825/what-do-curly-braces-mean-in-jsx-react – Tarun Khosla Sep 06 '19 at 23:31
  • Thanks everybody. I have already seen the above questions and they do not irrigate my curiosity :) The above answers were meant for objects and not for integers :) – Badawi Sep 06 '19 at 23:37
  • @Badawi The answers are just as relevant. – jhpratt Sep 06 '19 at 23:40
  • @jhpratt indeed I was looking for a specific answer that was not mentioned in the above questions. I always make sure to check if my question was answered or not :) Thanks for concern anyways :) – Badawi Sep 06 '19 at 23:43
  • I am one of two users who has currently voted to close. That question says what curly braces are for in JSX. The first answer also implicitly answers your question as to why you need them. – jhpratt Sep 06 '19 at 23:47
  • Oh, I'm so sorry if my question doesn't go along with the guidelines. Yes, the answer already clarified my point. I don't think the other question mentioned the part I was looking for. I can delete the question in case it should not be here. I'm a newbie after all ^^ – Badawi Sep 06 '19 at 23:52

1 Answers1

1

The latter, that's how we embed JavaScript in JSX. However, the above is rather superfolous, since you're dealing with primitive types. However -

<Button id=0 />

is not legal React code. You would get the following error:

JSX value should be either an expression or a quoted JSX text

Which means your options are really only

<Button id={0} />

And 

<Button id="0" />
Chris Ngo
  • 15,460
  • 3
  • 23
  • 46
  • I suppose using a string would actually have better performance. But its really negligible. Consider that using an expression actually means that React has to parse and read a piece of javascript code that is not a primitive type. But if you just want to use a number, then there's no point in using an expression, thus saving you time. – Chris Ngo Sep 06 '19 at 23:40