I am looking for a way to dynamically change the color of a class based on the transaction data in a table.
import React from "react";
import Table from "react-bootstrap/Table";
import "./TableComponent.css";
const TableComponent = ({
Movement
}) => {
const colorType = Movement.map((obj) => {
let colorClass = "p-1 ";
if (obj.Type === "Deposit") {
colorClass += "depo";
} else {
colorClass += "wit";
}
return colorClass;
});
const renderMovements = (Movement, i) => {
return (
<tr key={i}>
<td className="p-3">
<div className={colorType}>{Movement.Type}</div>
</td>
<td className="p-3 App" colSpan="2">{Movement.Date}</td>
<td className="p-3 App">{Movement.Amount}</td>
</tr>
);
};
return (
<div>
<Table striped bordered hover size="sm">
<thead>
<tr>
<th className="p-2 App">Transaction</th>
<th className="p-2 App" colSpan="2">Date</th>
<th className="p-2 App">Amount</th>
</tr>
</thead>
<tbody>{Movement.map(renderMovements)}</tbody>
</Table>
<button onClick={testColor}>Test Color</button>
</div>
);
};
export default TableComponent;<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>The issue with this code is that the last class added is applied to every element. I want to differentiate between withdrawals and deposits by displaying red background for withdrawals and green for deposits.