How to change color of text based on its positive or negative value JavaScript(React)-CodePudding

Good day everyone, I'm trying to work on a certain functionality where the color of the value is set to green if above 0, red if below 0, orange/yellow If equal to 0. I'm using styled components and I'm having a tougher time than I thought trying to find an ideal and reusable solution

THERE IS A SIMPLIFIED SANDBOX HERE TO HELP: https://codesandbox.io/s/blissful-rui-hw454r?file=/src/App.js

Thank you for help in advance

CodePudding user response：

Here is example for you, Always try to do some exercise before posting question here.

import "./styles.css";
import styled from "styled-components";
import React from "react";

const Percent = styled.h1`
  color: ${(props) =>

        props.data === 0 ? "orange" : props.data > 0 ? "red" : "palevioletred"};
    `;

export default function App() {
  return (
    <div className="App">
      <Percent data={0}>0.56</Percent>
      <Percent data={-1}>-0.56</Percent>
      <Percent data={1}>0.56</Percent>
    </div>
  );
}

Feel free to comment, if you still have something.

CodePudding user response：

Here is my example hope this helps with reusability

https://codesandbox.io/s/reverent-sound-hxh2sl?file=/src/App.js