我在哪里可以在反应类中编写条件语句？

Question

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.

Answer 1

所有的条件语句都应该在练习的方格内。

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

Answer 2

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>

Answer 3

Another approach is to wrap your text in a Typography component and change the color attribute based on your condition. In this way you isolate you text from the rest of the content content of the Grid (it will not affect the today text beside it):

<Typography color={row.data.MarketD<0 ? 'red' : 'green'}>
    Your text here
</Typography>