react-if-esle.jsx

//if else in jsx

//we need to render the tab view if the tab it's active, and loop the users if not users show empty message

//option 1
render(){
  const {users, tab_active} = this.state
  return (
     <div>
      { tab_active == "users" && (
        (users.length) ?
          users.map( user => (
            <UserCard user={user} key={user.id} />
          ))
         :
         <div>No Hay resultados para esta busqueda.</div>
      )}
     </div>
  )
}


//option 2
// use do expresion see https://babeljs.io/docs/plugins/syntax-do-expressions/
render(){
  const {users, tab_active} = this.state
  return (
    { do {
      if (tab_active == "users") {
        if (users.length){
          users.map( user => (
            <UserCard user={user} key={user.id}/>
          ))
        }else{
          <div>No Hay resultados para esta busqueda.</div>
        }
      }}
    }

//option 3
// complex render in other function

users_cards_or_empty = users => {
  if(users.lenght){
   return ( users.map( user => (
      <UserCard user={user} key={user.id} />
    ))
   )
  }else{
    return (
      <div>No Hay resultados para esta busqueda.</div>
    )
  }
}

render() {
  const {tab_active, users} = this.state
  return (
    { tab_active == "users" && (
      {this.render_users_cards_or_empty(users)}
    )}
  )
}


//option 4 
// IIFE

render(){
  const {users, tab_active} = this.state
  return (
     <div>
      { ( function(){
        if(tab_active == "users"){ return (
          if(users.length){ return (
            users.map( user => (
              <UserCard user={user} key={user.id} />
            ))
          )} else{ return (
            <div>No Hay resultados para esta busqueda.</div>
          )}
        )}
      )}() }
     </div>
  )
}