CODEWITHSUNDEEP
javascriptcssreactjs
Alonso
Alonso

Reputation: 21

How to based in a condition apply or not a property into a jsx element

I have this element:

<div id="app-wrapper" style={{"grid-template-columns": "50% 50%"}}>..</div>

I want to based on a condition defined in my component's state change the style property to this:

<div id="app-wrapper" style={{"grid-template-columns": "100%"}}>..</div>

Upvotes: 0

Views: 40

Answers (2)

MWO
MWO

Reputation: 2806

You like to use ternary operators:

<div id="app-wrapper" style={{"grid-template-columns": condition?"100%":"50% 50%"}}>..</div>

Upvotes: 1

Faris Aziz
Faris Aziz

Reputation: 144

You can conditionally render the style using a ternary operator in 2 ways:

Option 1:

<div id="app-wrapper" style={state? {"grid-template-columns": "50% 50%"} : {"grid-template-columns": "100%"}}>..</div>

Option 2 (cleaner):

const divStyle = state? {"grid-template-columns": "50% 50%"} : {"grid-template-columns": "100%"}


<div id="app-wrapper" style={divStyle}>..</div>

Upvotes: 1

Related Questions