Can we perform expressions within the curly braces?

Question

In the context of this exercise, we know that we can pass prop values inside of the curly braces, but can we also perform expressions within them?

Answer

Yes, any valid JavaScript expression can be placed inside of the curly braces. The curly braces are special characters that tell the parser that there is JavaScript code inside, and to run it as such. As a result, you can run any JavaScript expression inside of it, and it will be evaluated before the resulting HTML is returned.

For example, in the following code, the expression inside the curly braces will be evaluated as JavaScript before the entire <h1> element is returned.

return <h1>{ this.props.value * 10 }</h1>
13 Likes