react jsx inline if else altering style value

Question

I know how to use different class in jsx using if else short hand in jxs, but how can I do that too with style?

says I have a loop where I need to check whether a property is present, if yes add margin top 10 to a div?

<div style={{marginTop:10}} /> 

Answer 1

With inline if-else:

<div style={isMarginNeeded ? {marginTop:10} : {}} /> 

You can read more about it here

Answer 2

You can do it like this:

<div style={present ? {marginTop:10} : {}} /> 

or like this:

<div style={{marginTop: present ? 10 : 0 }} /> 

or more complicated style with spread operator:

<div style={{
  marginLeft:10,
  ...( present ? {marginTop:10} : {} ),
}} />