JavaScript expressions can be used inside of JSX. We just need to wrap it with curly brackets {}.<\/p>\n
After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects.<\/p>\n
This means that you can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions:<\/p>\n
function getGreeting(user) {<\/p>\n
if (user) {<\/p>\n
return <h1>Hello, {formatName(user)}!<\/h1>;<\/p>\n
}<\/p>\n
return <h1>Hello, Stranger.<\/h1>;<\/p>\n
}<\/p>\n
The following example will render 2.<\/p>\n
import React from ‘react’;<\/p>\n
class App extends React.Component {<\/p>\n
render() {<\/p>\n
return (<\/p>\n
<div><\/p>\n
<h1>{1+1}<\/h1><\/p>\n
<\/div><\/p>\n
);<\/p>\n
}<\/p>\n
}<\/p>\n
export default App;<\/p>\n
We cannot use if else statements inside JSX, instead we can use conditional (ternary) expressions. In the following example, variable i equals to 1 so the browser will render true, If we change it to some other value, it will render false.<\/p>\n","protected":false},"excerpt":{"rendered":"
JavaScript expressions can be used inside of JSX. We just need to wrap it with curly brackets {}. After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects. This means that you can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[8528],"tags":[8548],"class_list":["post-73412","page","type-page","status-publish","hentry","category-reactjs","tag-javascript-expressions"],"acf":[],"yoast_head":"\n