Question 412788 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – What exactly can be put inside JSX curly braces?

I just stated learning React not too long ago. I was first confused why can’t we put if statements inside JSX curly braces. I came across this question if-else statement inside jsx: ReactJS and realised only expressions are allowed inside the curly braces which explains why ternary operator works because it is an expression that always resolves to a value.

But when I tried to do console.log inside the curly braces, it works. Now this confuses me because I thought console.log is a statement.

In the new React docs, they didn’t explicitly specify what goes into the curly braces; but in the older React doc, they did outline expressions are used inside the curly braces.

So if curly braces tells React inside are the JavaScript code What do curly braces mean in JSX (React)? What exactly can be accepted in the curly braces?

Tags:

2

Answers


  1. 0

    You can render:

    1. Variable values
    2. Mathematical operations
    3. Invoke functions
    4. Loop through array and objects to render elements using methods like filter, map etc.
    5. conditionally render elements.
    Login or Signup to reply.
  2. 0

    Let us discuss:

    Expressions are generally called as the parts of a statement.

    For example,

    const a = 1; // statement 1
const b = a + 1; // statement 2

    In the above two statements, there are three expressions.

    a) 1 is a numeric literal expression appears twice here.

    b) b is a numeric variable expression appears once here.

    We call it expressions since it yield values on evaluation.
    Therefore we say in general, expressions are evaluated.

    Now to make this point absolutely clear, we need to refresh what is a statement. As we said a statement is formed of one or many expressions. However, the defining characteristic of a statement is that it does some thing using the values in the expressions if any.

    For example, statement 1 is an assignment statement since it evaluates the expression and then assigns the value to the variable a. Similarly, statement 2 is again an assignment statement which evaluates the compound expression a + 1 and then assigns the results to the variable b.

    Now when it comes to React, the set of curly braces in JSX is a windows to JavaScript, however only expressions are allowed here, in other words statements are forbidden here. The statements are written in the body part of the functional component. Please look at the example below.

    App.js

    export default function App() {
  const a = 1; // statement 1
  const b = a + 1; // statement 2

  return (
    <label>
      a and b are {a} and {b}
    </label>
  );
}

    Output:

    a and b are 1 and 2

    However, the following code is illegal, since it uses statements inside the JSX.

    export default function App() {

  return (
    <label>
      a and b are {const a = 1} and {const b = a + 1}
    </label>
  );
}

    Now addressing the doubts you have raised in your post:

    a. if else is basically a branching statement which takes the program flow forward based on the results of evaluating the expressions.

    b. The ternary operator is used to build compound expressions. Therefore it remains as an expression. It does not do branching as if else statement does.

    c. Functional invocation is an also expression since it results a value. However the following is not an expression but a statement. Since it asks to invoke the function and store the value into a variable x. Pease remember undefined is the implicit return value of every function.

    const x = console.log('log someting'); // x is undefined
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search