change icon tag with javascript

Question

I am new in React and semantic view. I have a Table which has a row that showing ok and a green checkmark is {this.props.email.success} return true. otherwise its change to red remove icon. here is my code : semantic-ui code :

<Table.Cell>
  <Icon color="green" name="checkmark" size="large" />
  {this.props.email.success}
</Table.Cell>

now based on success value the Icon name and color should change. how can I do this ? thank for any help.

Answer 1

Probably something like this:

<Icon color={this.props.email.success ? "green" : "red"} name="checkmark" size="large" />

EDIT

Credit to @D Lowther If you want to change more than just the color of the icon you could do something like this:

let icon = (this.props.email.success) ? <Icon color...> : <Icon color...>;
return (<Table.cell>{icon}</Table.cell>);