reactjsmaterial-uiformik-material-ui

Where can I write a conditional statement in a react class?

I have to write a conditional statement to make a certain percentage value green if its positive and red if its negative. But I am not sure where to write this conditional statement.

<div>
{this.state.tableData.map((row, index)=>{
return(

<Box component="span" sx={{}}>
<Grid > {row.data.direction}</Grid>
<Grid > ({row.data.marketD}%) today </Grid>
</Box>

)
})}
</div>

I need to make row.data.marketD show colour.

color: {row.data.marketD}<0 ? 'red':'green'.

But I have no idea which tag to include this condition in. Any help is appreciated.

Solution

  • Consider the answer as a concept. Your ui library may provide another way.

    <span style={{color:row.data.MarketD<0 ? 'red' : 'green'}}>{row.data.marketD}</span>