0

In the code below why is the first instance of

const classDropdownMenu = 'dropdown-menu' + (this.state.isToggleOn ?' show' : '')

this.state.isToggleOn enclosed in paretheses, but the second instance

{this.props.children}

is enclosed in curly brackets.
I am new to reactjs and I am trying to grasp when to use curly brackets vs parentesis.

Is it because the first instance is using string concatenation in jsx and the second instance is evaluating a variable inside a jsx function? So if you are inside a jsx function you need to evaluate, else jsx already knows about it?

class NavDropDown extends React.Component {
  constructor(props){
    super(props)
    this.state = { 
      isToggleOn:false
    }   
  }
  render(){
    const classDropdownMenu = 'dropdown-menu' + (this.state.isToggleOn ?' show' : '') 

    return (
      <li className="nav-item dropdown-toggle" hfref="/" id="navbarDropdown" role="button"
      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <div className={classDropDownMenu} aria-labelledby="navbarDropdown">
        {this.props.children}
      </div>
      </li>
    )   
  }
}
user249806
  • 299
  • 1
  • 3
  • 14

1 Answers1

1

In the first place, 

const classDropdownMenu = 'dropdown-menu' + (this.state.isToggleOn ?' show' : '')

you are trying to execute an expression and add the result of this expression to 'dropdown-menu' string and hence wrapped it within (). This is a Javascript syntax witing in a function.

For the second case 

{this.props.children}

Where the content within return () is a JSX content and expression in JSX are enclosed within {}. For more details check the docs on Embedding Expressions in JSX

Shubham Khatri
  • 270,417
  • 55
  • 406
  • 400