What does curly braces inside JSX means? If it means Javascript expression, then why it is giving error, "JSX element must have one parent element?"

what is jsx
jsx stands for
when to use curly braces in react
jsx vs js
jsx full form
jsx tutorial
jsx without react
react hooks

I have written a code as follows:

import React, {Component} from 'react';
import './App.css';
import Person from './Person/Person';

class App extends Component {

  state = {
    persons: [
      {name: 'A', age: 20},
      {name: 'B', age: 21},
      {name: 'C', age: 22}
    ],
    city: 'New Delhi',
    showPerson: false
  }

  togglePerson = () => {
    this.setState({
      showPerson: !this.state.showPerson
    });
  }

  changeNameHandler = (name) =>{
    this.setState({
      persons: [
        {name: 'AA', age: 20},
        {name: name, age: 21},
        {name: 'CC', age: 22}
      ]
    });
  }

  render(){
    console.log("Hello India ");
    return (
      <div className="App">
        <button onClick={()=> this.togglePerson() }>Toggle Person</button>
        {

          <Person name={this.state.persons[0].name} age={this.state.persons[0].age}/>
          <Person name={this.state.persons[1].name} age={this.state.persons[1].age}>My hobby is Car Racing</Person>
          <Person name={this.state.persons[2].name} age={this.state.persons[2].age}>My hobby is Cooking</Person>

        } //Line 1
      </div>
    );
  }
}

export default App;

In this code I have used curly braces inside JSX so that code inside curly braces could be considered as Javascript expression. But on using curly braces I am getting error (at Line1, written as comment), "JSX element must have one parent element".

Why is this so? I have read that React considers code as Javascript Expression which are written inside curly braces. Then why it is expecting that I should return only one element from curly braces section, although React should consider it as Javascript Expression, not a JSX element.

You just need to remove the curly braces that are wrapping your JSX components:

render(){
    console.log("Hello India ");
    return (
      <div className="App">
        <button onClick={()=> this.togglePerson() }>Toggle Person</button>
          <Person name={this.state.persons[0].name} age={this.state.persons[0].age}/>
          <Person name={this.state.persons[1].name} age={this.state.persons[1].age}>My hobby is Car Racing</Person>
          <Person name={this.state.persons[2].name} age={this.state.persons[2].age}>My hobby is Cooking</Person>
      </div>
    );
  }

Alternatively, you could keep the curly braces (though not necessary and you probably shouldn't) and add a wrapping element around your Person components:

render(){
    console.log("Hello India ");
    return (
      <div className="App">
        <button onClick={()=> this.togglePerson() }>Toggle Person</button>
        {
          <div>
            <Person name={this.state.persons[0].name} age={this.state.persons[0].age}/>
            <Person name={this.state.persons[1].name} age={this.state.persons[1].age}>My hobby is Car Racing</Person>
            <Person name={this.state.persons[2].name} age={this.state.persons[2].age}>My hobby is Cooking</Person>
          </div>
        } //Line 1
      </div>
    );
  }

What does curly braces inside JSX means? If it means Javascript , We will come back to components in a further section, but if you're not yet comfortable It also allows React to show more useful error and warning messages. You can put any valid JavaScript expression inside the curly braces in JSX. This means that you can use JSX inside of if statements and for loops, assign it to� Answers: The curly braces are a special syntax to let the JSX parser know that it needs to interpret the contents in between them as JavaScript instead of a string. You need them when you want to use a JavaScript expression like a variable or a reference inside JSX.

The error is occurring because these elements don't have a parent:

<Person name={this.state.persons[0].name} age={this.state.persons[0].age}/>
<Person name={this.state.persons[1].name} age={this.state.persons[1].age}>My hobby is Car Racing</Person>
<Person name={this.state.persons[2].name} age={this.state.persons[2].age}>My hobby is Cooking</Person>

These are valid JSX elements, not Javascript expressions so they shouldn't be wrapped with curly braces.

This is an example of a Javascript expression

this.state.persons[2].name

Which you've wrapped in curly braces appropriately.

Introducing JSX – React, You are not required to use JSX, but JSX makes it easier to write React applications. With JSX you can write expressions inside curly braces { } . 1) Curly braces { } are special syntax in JSX. It is used to evaluate a JavaScript expression during compilation. A JavaScript expression can be a variable, function, an object, or any code that

React does not allow for sister elements not to have a parent element. Person elements in your code are sister. You can envelope them in a div but to not add unnecessary tag to your UI, you can envelope them in a Fragment <> Sister elements here </> as follows

class App extends Component {

  state = {
    persons: [
      {name: 'A', age: 20},
      {name: 'B', age: 21},
      {name: 'C', age: 22}
    ],
    city: 'New Delhi',
    showPerson: false
  }

  togglePerson = () => {
    this.setState({
      showPerson: !this.state.showPerson
    });
  }

  changeNameHandler = (name) =>{
    this.setState({
      persons: [
        {name: 'AA', age: 20},
        {name: name, age: 21},
        {name: 'CC', age: 22}
      ]
    });
  }

  render(){
    console.log("Hello India ");
    return (
      <div className="App">
        <button onClick={()=> this.togglePerson() }>Toggle Person</button>
        {
          <>
          <Person name={this.state.persons[0].name} age={this.state.persons[0].age}/>
          <Person name={this.state.persons[1].name} age={this.state.persons[1].age}>My hobby is Car Racing</Person>
          <Person name={this.state.persons[2].name} age={this.state.persons[2].age}>My hobby is Cooking</Person>
          </>
        }
      </div>
    );
  }
}

React JSX, Most of these features are modern to JavaScript but I'll also talk about some older However, when you define variables with var in a block scope you can totally Arrow functions give access to their defining environment while regular These curly brackets in React are how you can insert dynamic expressions in JSX. In javascript curly braces are used for several purposes. I your case these are used to create a key-value pair. In others cases curly braces are used to combine a set of statements in a block. And sometimes they are used to create objects like var abc = { “a”: 1, “b”: 2 };

All the JavaScript you need to know before starting with React, 15 common problems that beginner React.js learners might make :: Learn fundamental and `A string template literal can include expression` 'This is just a string, you cannot The short syntax of arrow functions does not use curly brackets. You can define class methods in a React component and then use them in the� Expressions in JSX. With JSX you can write expressions inside curly braces { }. The expression can be a React variable, or property, or any other valid JavaScript expression. JSX will execute the expression and return the result:

React Commonly Faced Problems :: React.js Beyond The Basics, Props are arguments that you provide to a JSX element in a React application. them will give you the tools to develop custom components that can After adding props to your component, you will use PropTypes to define the type of with curly braces so that React will know to evaluate it as JavaScript. JSX is an Expression Too . 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 return it from functions:

How To Customize React Components with Props, Technically arrow functions are also expressions but in the industry we usually just refer to When arrow functions omit their curly-braces, it means we want the thing on the right-hand The callback function will give us two important arguments. This will cause an error if `people` is not an array function� Whenever JavaScript constants or expressions are to be written inside JSX, they should be wrapped in curly braces. In the example below, we declared a variable called name and then use it inside JSX by wrapping it in curly braces: