Как использовать условие if else в jsx?

Поскольку вы забыли вернуть элементы, по умолчанию функция возвращает значение undefined. Вы определили iife, который не будет возвращать результат автоматически, вам нужно это сделать.

Напишите это так:

{(()=>{
    if (this.props.isLoading) {
        return <Loader />
    }else if (this.props.isError){
        return <Error errorMsg = {this.props.error} />
    }else if (this.props.isSuccess){  
        return <h1>success</h1>   
    }

})()}

Рассмотрим этот пример, чтобы сделать картину более ясной, в этом случае функция renderElement вернет undefined, и ничего не будет отрисовано.

render(){
    return (
        <div>
            {this.renderElement()}
        </div>
    )
}


// it will not return anything    
renderElement(){
    if (this.props.isLoading) {
        <Loader />
    }else if (this.props.isError){
        <Error errorMsg = {this.props.error} />
    }else if (this.props.isSuccess){  
        <h1>success</h1>   
    }
}

Как насчет этого?

class Wrapper extends React.Component {
    render() {
        return (
            <Layout>
                {this.props.loading &&
                    <Loader />
                }
                {this.props.error &&
                    <Error errorMsg = {this.props.error} />
                }
                {this.props.succes &&
                    <h1>success</h1>
                }
            </Layout>
        );
    }
}

export default Wrapper;

class Wrapper extends React.Component {

  render() {
   let content, message;

   this.props.error ? message = <Error errorMsg = {this.props.error}> : null
   this.props.success ? message =  <h1>success</h1> : null
   this.props.isLoading ? content = <Loader/> : content = message

   return (
      <Layout>
         {content}
      </Layout>
    )}
}

export default Wrapper;