Styjun

What aircraft was used as Air Force One for the flight between Southampton and Shannon?

Is using 'echo' to display attacker-controlled data on the terminal dangerous?

How can I end combat quickly when the outcome is inevitable?

Is it safe to change the harddrive power feature so that it never turns off?

How can I get an unreasonable manager to approve time off?

Ability To Change Root User Password (Vulnerability?)

How is the excise border managed in Ireland?

How to decline a wedding invitation from a friend I haven't seen in years?

How does the Around command at zero work?

Bb13b9 confusion

How come the nude protesters were not arrested?

Entire circuit dead after GFCI outlet

A map of non-pathological topology?

Why we don’t make use of the t-distribution for constructing a confidence interval for a proportion?

Are there any important biographies of nobodies?

Check if three arrays contains the same element

Is it possible to have a wealthy country without a middle class?

Why can my keyboard only digest 6 keypresses at a time?

Why does Sin[b-a] simplify to -Sin[a-b]?

Longest bridge/tunnel that can be cycled over/through?

Who enforces MPAA rating adherence?

Fixing obscure 8080 emulator bug?

Is it expected that a reader will skip parts of what you write?

Is an entry level DSLR going to shoot nice portrait pictures?

Conditional Rendering inside the Component

Styling multi-line conditions in 'if' statements?Loop inside React JSXCss animated spinner is buggy in IE on Windows 8.1 when used in a React JS componentHow to wait for AJAX response and only after that render the component?React + Semantic-UI: Using Forms inside UI MODALReact/redux + bootstrap, make modal show unique for componentReact.semantic ui's Icones are not loading with webpack middle wareChild components not rendering as expectedreact not found component always rendersReact spinner when components async content are loaded completely

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

I have a Semantic UI Modal in separate component and I am calling in another component. This is working fine.

If I add a if condition inside the Modal it's throwing an error.

Below is my code.

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>"
/>

The above one is working fine.

But the below one is not working

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>"
/>

What is wrong in the above method?

reactjs if-statement modal-dialog conditional semantic-ui

share|improve this question

asked Mar 24 at 19:16

DhanapalDhanapal

71113

add a comment | 

0

I have a Semantic UI Modal in separate component and I am calling in another component. This is working fine.

If I add a if condition inside the Modal it's throwing an error.

Below is my code.

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>"
/>

The above one is working fine.

But the below one is not working

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>"
/>

What is wrong in the above method?

reactjs if-statement modal-dialog conditional semantic-ui

share|improve this question

asked Mar 24 at 19:16

DhanapalDhanapal

71113

add a comment | 

I have a Semantic UI Modal in separate component and I am calling in another component. This is working fine.

If I add a if condition inside the Modal it's throwing an error.

Below is my code.

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>"
/>

The above one is working fine.

But the below one is not working

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>"
/>

What is wrong in the above method?

reactjs if-statement modal-dialog conditional semantic-ui

share|improve this question

asked Mar 24 at 19:16

DhanapalDhanapal

71113

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;

<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>"
/>

<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>"
/>

share|improve this question

asked Mar 24 at 19:16

DhanapalDhanapal

71113

share|improve this question

asked Mar 24 at 19:16

DhanapalDhanapal

71113

asked Mar 24 at 19:16

DhanapalDhanapal

71113

asked Mar 24 at 19:16

DhanapalDhanapal

71113

1 Answer
1

active

oldest

votes

0

Something like this ?
Not the cleanest approach though

 <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',
 
 
 />

share|improve this answer

edited Mar 24 at 19:44

answered Mar 24 at 19:22

Alexandr ZavaliiAlexandr Zavalii

1,030924

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  ya.. That works.. but i am getting an error at header tag. it's not recognized like size or dimmer. How to make the header and content to Modal attributes?
  
  – Dhanapal
  Mar 24 at 19:43
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I updated the comment, I think Header should not be wrapped in commas
  
  – Alexandr Zavalii
  Mar 24 at 19:44
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  oh... Sorry for the confusion.. I mean the header: and content: attribute itself not recognized.
  
  – Dhanapal
  Mar 24 at 19:47
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Dhanapal sorry I dont understand. Check this example: codesandbox.io/s/wkyjk2426l?module=/example.js
  
  – Alexandr Zavalii
  Mar 24 at 20:12
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55327547%2fconditional-rendering-inside-the-component%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

Something like this ?
Not the cleanest approach though

 <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',
 
 
 />

share|improve this answer

edited Mar 24 at 19:44

answered Mar 24 at 19:22

Alexandr ZavaliiAlexandr Zavalii

1,030924

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  ya.. That works.. but i am getting an error at header tag. it's not recognized like size or dimmer. How to make the header and content to Modal attributes?
  
  – Dhanapal
  Mar 24 at 19:43
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I updated the comment, I think Header should not be wrapped in commas
  
  – Alexandr Zavalii
  Mar 24 at 19:44
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  oh... Sorry for the confusion.. I mean the header: and content: attribute itself not recognized.
  
  – Dhanapal
  Mar 24 at 19:47
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Dhanapal sorry I dont understand. Check this example: codesandbox.io/s/wkyjk2426l?module=/example.js
  
  – Alexandr Zavalii
  Mar 24 at 20:12
  

  
  
  
  

add a comment | 

0

Something like this ?
Not the cleanest approach though

 <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',
 
 
 />

share|improve this answer

edited Mar 24 at 19:44

answered Mar 24 at 19:22

Alexandr ZavaliiAlexandr Zavalii

1,030924

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  ya.. That works.. but i am getting an error at header tag. it's not recognized like size or dimmer. How to make the header and content to Modal attributes?
  
  – Dhanapal
  Mar 24 at 19:43
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I updated the comment, I think Header should not be wrapped in commas
  
  – Alexandr Zavalii
  Mar 24 at 19:44
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  oh... Sorry for the confusion.. I mean the header: and content: attribute itself not recognized.
  
  – Dhanapal
  Mar 24 at 19:47
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Dhanapal sorry I dont understand. Check this example: codesandbox.io/s/wkyjk2426l?module=/example.js
  
  – Alexandr Zavalii
  Mar 24 at 20:12
  

  
  
  
  

add a comment | 

Something like this ?
Not the cleanest approach though

 <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',
 
 
 />

share|improve this answer

edited Mar 24 at 19:44

answered Mar 24 at 19:22

Alexandr ZavaliiAlexandr Zavalii

1,030924

 <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',
 
 
 />

share|improve this answer

edited Mar 24 at 19:44

answered Mar 24 at 19:22

Alexandr ZavaliiAlexandr Zavalii

1,030924

answered Mar 24 at 19:22

Alexandr ZavaliiAlexandr Zavalii

1,030924

answered Mar 24 at 19:22

Alexandr ZavaliiAlexandr Zavalii

1,030924