How do I change the color of a p tag based on a condition-CodePudding

If the price_change_percentage_24h is greater than 0, I want to change the colour of the p tags to green and if they are less than 0, I want to change it to red. I don't understand how to create the proper conditional statement and how to change the colour based on it's result. How do I achieve this?

This is the response I get from the CoinGecko API: [1]: https://i.stack.imgur.com/BRINE.png

This is my code:

import React from 'react'
import './Coins.css'

const CoinItem = (props) => {
  
  return (
    <div className = 'coin-row'>
        <p>{props.coins.market_cap_rank}</p>
        <div className = 'img-symbol'>
            <img src={props.coins.image} alt='' />
            <p>{props.coins.symbol.toUpperCase()}</p>

        </div>
        <p>${props.coins.current_price.toLocaleString()}</p>
        <p>{props.coins.price_change_percentage_24h.toFixed(2)}%</p>
        <p className='hide-mobile'>${props.coins.total_volume.toLocaleString()}</p>
        <p className='hide-mobile'>${props.coins.market_cap.toLocaleString()}</p>
    </div>
  )
}

export default CoinItem

and

import React, {useState, useEffect} from 'react'
import axios from 'axios'
import './App.css';
import {Routes, Route} from 'react-router-dom'
import Coins from './components/Coins'
import Coin from './routes/Coin'
import NavBar from './components/NavBar';

function App() {
  const [coins, setCoins] = useState([])
  

  const url = 'https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1&sparkline=false';

  useEffect(() => {
    axios.get(url).then((response) => {
      setCoins(response.data)
      console.log(response.data[0])
    }).catch((error) => {
      console.log(error)
    })
  }, [])

  return (
   <>
   <NavBar />
   <Routes>
    <Route path ='/' element={<Coins coins={coins} />} />
    <Route path='/coin' element={<Coin />}>
      <Route path=':coinId' element={<Coin />} />
    </Route>
   </Routes>
   
   </>
  );
}

export default App;

CodePudding user response：

You can change your p tag to this,

<p style={{color: props.coins.price_change_percentage_24h > 0 ? "green" : "red" }}>{props.coins.price_change_percentage_24h.toFixed(2)}%</p>

CodePudding user response：

You can do something like that to reuse all tags.

    import React from 'react'
import './Coins.css'

const CoinItem = (props) => {
  
  const PTag = ({children}) => {
    if (props.coins.price_change_percentage_24h > 0) {
      return <p style={{color: "green"}}>{children}</p>
    }
    return <p style={{color: "red"}}>{children}</p>
  }


  return (
    <div className = 'coin-row'>
        <PTag>{props.coins.market_cap_rank}</PTag>
        <div className = 'img-symbol'>
            <img src={props.coins.image} alt='' />
            <PTag>{props.coins.symbol.toUpperCase()}</PTag>

        </div>
        <PTag>${props.coins.current_price.toLocaleString()}</PTag>
        <PTag>{props.coins.price_change_percentage_24h.toFixed(2)}%</PTag>
        <PTag className='hide-mobile'>${props.coins.total_volume.toLocaleString()}</PTag>
        <PTag className='hide-mobile'>${props.coins.market_cap.toLocaleString()}</PTag>
    </div>
  )
}

export default CoinItem

CodePudding user response：

use this,

 if (props.coins.price_change_percentage_24h > 0) {
     return (
       <p  style={{color:"green"}}></p>
     );
 else
    return (
        <p  style={{color:"red"}}></p>
     );

}

CodePudding user response：

The most optimal way would be to make condition right inside of style with styling. In that case you are still able to not lose the styling which is granted with classes of CSS to the code.

Remember style "overrides" class properties.

<p  
    style={ price_change_percentage_24h>0 
    ?
        {color:"green"} 
    : 
        price_change_percentage_24h<0 
        ? 
            {color:"red"} 
        : 
            {}
        }>
    props.coins.price_change_percentage_24h.toFixed(2)}%
</p>

CodePudding user response：

I prefer not to put styles directly in JS, & hence would use a class or an attribute instead.

var pcp = props.coins.price_change_percentage_24h > 0?'pos':'neg';


<p className="hidename" data-pcp={pcp}></p>

And in css,

p[data-pcp="pos"] {
    color: springgreen;   
}

p[data-pcp="neg"] {
    color: crimson;
}