JSX Expressions and conditions

We can expand values of Javacript variables, call javascript functions and class methods inside the JSX as below.

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

class App extends Component {

  foo1 = ()=> 'Bars';

  render(){

    const name ='First Name';
    const loading = true;

    if(loading){
      return <h4>Loading....</h4>
    }

    const foo2 = () => 'Bar';

    return (
      <div className="App">
        <h1>Hello from {name}</h1>
        <h1>Hello from {name.toUpperCase()}</h1>
    <h2>Hello {1+1}</h2>
    <h2>Hello from {foo2()}</h2>
    <h2>Hello from {this.foo1()}</h2>
      </div>
    );
  }
  
}

export default App;

We can use conditional statements also as below

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

class App extends COmponent {



  render(){

    const name ='First Name';
    const loading = false;

     

    return (
      <div className="App">
        <h1>My App</h1>
        {loading ? <h4>Loading...</h4> : <h1>Hello {name}</h1>}
      </div>
    );
  }
  
}

export default App;

We can add one more condition as below.

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

class App extends COmponent {



  render(){

    const name ='First Name';
    const loading = false;

    const showName = true;

    return (
      <div className="App">
        <h1>My App</h1>
        {loading ? <h4>Loading...</h4> : <h1>Hello {showName?name:null}</h1>}
      </div>
    );
  }
  
}

export default App;

The second condition, don't have an else part. So, add the condition using &&.

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

class App extends COmponent {



  render(){

    const name ='First Name';
    const loading = false;

    const showName = true;

    return (
      <div className="App">
        <h1>My App</h1>
        {loading ? <h4>Loading...</h4> : <h1>Hello {showName && name}</h1>}
      </div>
    );
  }
  
}

export default App;