Change color on conditions in table map in reactjs

Question

I want to change the color of td entry in my table. As if current balance is less than 100, red color should be red. if current balance is between 100 and 200, current balance color turns yellow , otherwise current balance column color should be green. The values are hardcoded, if i change values, colors should be changed accordingly.

Here is my code:

import React from 'react';
import * as Icon from 'react-feather';
import PropTypes from "prop-types";
import { Link } from "react-router-dom";
import { Dropdown, Table, Badge } from 'react-bootstrap';

class ChurnCustomer extends React.Component {
    constructor(props) {
        super(props);
        this.state =
        {
            title: "New Users",
            users: [
                {
                    id: 1,
                    name: "Addison Mary",
                    email: "amary@GrammarList.com",
                    phoneNo: '724313577059',
                    CurrentBalance: 356
                },
                {
                    id: 2,
                    name: "Rosemary Joe",
                    email: "rosemary.joe@gmail.com",
                    phoneNo: '003135770259',
                    CurrentBalance: 125,
                },
                {
                    id: 3,
                    name: "Scarlett Skyler",
                    email: "sskyler@gmail.com",
                    phoneNo: '933135770134',
                    CurrentBalance: 49
                },
                {
                    id: 4,
                    name: "Victoria B.",
                    email: "victoriaBgmail.com",
                    phoneNo: '003357577009',
                    CurrentBalance: 195
                },
                {
                    id: 5,
                    name: "Philip",
                    email: "philip@gmail.com",
                    phoneNo: '005613570459',
                    CurrentBalance: 249
                },
                {
                    id: 6,
                    name: "Zoe Nelms",
                    email: "zoe@gmail.com",
                    phoneNo: '923135770459',
                    CurrentBalance: 99
                }
            ]
        }
    }
    render() {
        const { users } = this.state;
        return (
            <div className='Customer-tables-div'>
                <div className="card mb-4">
                    <div className="card-body">
                        <div className="card-header d-flex">
                            <h5 className="card-title w-50 float-left">Churn Customer</h5>

                        </div>

                        <div className="height-310">
                            <Table className="m-0" responsive>
                                <thead>
                                    <tr>
                                        <th>Customer Name</th>
                                        <th>Email</th>
                                        <th>Phone No.</th>
                                        <th>Current Balance</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    {users.map((user, idx) => (
                                        <tr key={idx}>
                                            <td>{user.name}</td>
                                            <td>{user.email}</td>
                                            <td>{user.phoneNo}</td>
                                            <td>
                                                {user.CurrentBalance}
                                            </td>

                                        </tr>
                                    ))}
                                </tbody>
                            </Table>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default ChurnCustomer;

I want to change the color of Current Balance according to the conditions mentioned above.

Answer 1

Let try inline style like:

   {users.map((user, idx) => {
        let color = user.CurrentBalance < 100 ? 'red' : (user.CurrentBalance <= 200 ? 'yellow' : 'green');

        return <tr key={idx}>
            <td>{user.name}</td>
            <td>{user.email}</td>
            <td>{user.phoneNo}</td>
            <td style={{backgroundColor: color}}>
                {user.CurrentBalance}
            </td>

        </tr>
    }}