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) => {
  if (price > 0) {
    return (
      <Text style={styles.rise}>
        <AntDesign name='caretup' color='#03AE9D' size={10} />{' '}
        {percentageFormat(item.price_change_percentage_24h)}%
      </Text>
    );
  } else {
    return (
      <Text style={styles.drop}>
        <AntDesign name='caretdown' color='#fb2c33' size={10} />{' '}
        {percentageFormat(item.price_change_percentage_24h)}%
      </Text>
    );
  }
};

How to make it look cleaner with smart and less code? PRs welcome!

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) => {
  if (price > 0) {
    return (
      <Text style={styles.rise}>
        <AntDesign name='caretup' color='#03AE9D' size={10} />{' '}
        {percentageFormat(item.price_change_percentage_24h)}%
      </Text>
    );
  } else {
    return (
      <Text style={styles.drop}>
        <AntDesign name='caretdown' color='#fb2c33' size={10} />{' '}
        {percentageFormat(item.price_change_percentage_24h)}%
      </Text>
    );
  }
};

How to make it look cleaner with smart and less code?

I've written this Card component which composes 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) => {
  if (price > 0) {
    return (
      <Text style={styles.rise}>
        <AntDesign name='caretup' color='#03AE9D' size={10} />{' '}
        {percentageFormat(item.price_change_percentage_24h)}%
      </Text>
    );
  } else {
    return (
      <Text style={styles.drop}>
        <AntDesign name='caretdown' color='#fb2c33' size={10} />{' '}
        {percentageFormat(item.price_change_percentage_24h)}%
      </Text>
    );
  }
};

How to make it look cleaner with smart and less code? PRs welcome!

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) => {
  if (price > 0) {
    return (
      <Text style={styles.rise}>
        <AntDesign name='caretup' color='#03AE9D' size={10} />{' '}
        {percentageFormat(item.price_change_percentage_24h)}%
      </Text>
    );
  } else {
    return (
      <Text style={styles.drop}>
        <AntDesign name='caretdown' color='#fb2c33' size={10} />{' '}
        {percentageFormat(item.price_change_percentage_24h)}%
      </Text>
    );
  }
};

How to make it look cleaner with smart and less code? PRs welcome!