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

Question

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>

Answer 1

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>

Answer 2

您喜欢使用三元运算符：

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