React component to render price change I've written this Card component which is composed of thumbnail image, name, symbol, total_volume, current_price, and price_change_percentage_24h.

I want to refactor my renderPriceChange function since it's using the same pattern.
const renderPriceChange = (price) =&gt; {
  if (price &gt; 0) {
    return (
      &lt;Text style={styles.rise}&gt;
        &lt;AntDesign name='caretup' color='#03AE9D' size={10} /&gt;{' '}
        {percentageFormat(item.price_change_percentage_24h)}%
      &lt;/Text&gt;
    );
  } else {
    return (
      &lt;Text style={styles.drop}&gt;
        &lt;AntDesign name='caretdown' color='#fb2c33' size={10} /&gt;{' '}
        {percentageFormat(item.price_change_percentage_24h)}%
      &lt;/Text&gt;
    );
  }
};

How to make it look cleaner with smart and less code?
It is equivalent to:
const renderPriceChange = (price) =&gt; {
  return (
    &lt;Text style={price &gt; 0 ? styles.rise : styles.drop}&gt;
      &lt;AntDesign
        name={price &gt; 0 ? 'caretup' : 'caretdown'}
        color={price &gt; 0 ? '#03AE9D' : '#fb2c33'}
        size={10}
      /&gt;{' '}
      {percentageFormat(item.price_change_percentage_24h)}%
    &lt;/Text&gt;
  )
}

You can inline the if...else by using JavaScript's ternary operator a ? b : c