To modify the table entry's color based on the current balance, follow these conditions: If the current balance is less than 100, it should be shown in red. If the current balance is between 100 and 200, display it in yellow. Otherwise, show it in green. Remember that the values are hardcoded, so if you change them, the colors will adjust accordingly.
See below for the code snippet:
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: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d8b9b5b9aaa1989faab9b5b5b9aa94b1abacf6bbb7b5">[email protected]</a>",
phoneNo: '724313577059',
CurrentBalance: 356
},
{
id: 2,
name: "Rosemary Joe",
email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="16647965737b77646f387c797356717b777f7a3875797b">[email protected]</a>",
phoneNo: '003135770259',
CurrentBalance: 125,
},
{
id: 3,
name: "Scarlett Skyler",
email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5c2f2f372530392e1c3b313d3530723f3331">[email protected]</a>",
phoneNo: '933135770134',
CurrentBalance: 49
},
{
id: 4,
name: "Victoria B.",
email: "victoriaBgmail.com",
phoneNo: '003357577009',
CurrentBalance: 195
},
{
id: 5,
name: "Philip",
email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8dfde5e4e1e4fdcdeae0ece4e1a3eee2e0">[email protected]</a>",
phoneNo: '005613570459',
CurrentBalance: 249
},
{
id: 6,
name: "Zoe Nelms",
email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b51444e6b4c464a424705484446">[email protected]</a>",
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} style={{color: user.CurrentBalance < 100 ? 'red' : (user.CurrentBalance >= 100 && user.CurrentBalance <= 200) ? 'yellow' : 'green'}}>
<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;
https://i.sstatic.net/Hu2hu.png
You can update the code above to dynamically change the color of the "Current Balance" field based on the specified criteria.