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?"

Question

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.

Answer 1

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>
    );
  }

Answer 2

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.

Answer 3

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>
    );
  }
}