Условный рендеринг внутри компонента

У меня есть Semantic UI Modal в отдельном компоненте, и я вызываю другой компонент. Это работает нормально.

Если я добавлю условие if внутри модального окна, оно выдаст ошибку.

Ниже мой код.

Modal.js

import React from 'react'
import { Button, Icon, Modal as SemanticModal} from 'semantic-ui-react'

const Modal = ({trigger, header, size, dimmer, content, actions}) => (
    <SemanticModal
        trigger = {trigger}
        size = {size}
        dimmer = {dimmer}
        header = {header}
        content = {content}
        actions = {actions}
      />
    )

export default Modal;

App.js

<Modal
    trigger = {<a>Link</a>}
    size = {'small'}
    dimmer = {'blurring'}
    header = {result== = ""?"<Header icon='spinner loading'/>":"<Header content='Result' />"}
    content = {result== = ""?"<p>Loading...</p>":"<p>showing the result</p>"}
/>

Вышеупомянутый работает нормально.

Но ниже не работает

App.js

<Modal
    trigger = {<a>Link</a>}
    size = {'small'}
    dimmer = {'blurring'}

    {
       publishStatus= = "" ? (
            header = "<Header icon='spinner loading'/>"
            content = "Loading..."
       ) : (
            header = "<Header content='Result' />"
            content = "showing the result"
       )
    }


    header = {result== = ""?"<Header icon='spinner loading'/>":"<Header content='Result' />"}
    content = {result== = ""?"<p>Loading...</p>":"<p>showing the result</p>"}
/>

Что не так в вышеописанном методе?