I am looking to display only values greater than 0 on each row without removing the entire row.
I attempted filtering for black > 0, but it resulted in the removal of the entire row. I am aiming to replace 0 with an empty string.
Check out my website / code below:
https://i.sstatic.net/SYbbM.png
I would like to 'hide' or replace any 0's in this table with an empty string.
import axios from "axios";
import { useEffect, useState } from "react";
const PRINTER_REST_API_URL = "http://localhost:8080/GetReport";
export type Printer = {
address: string;
black: number;
blackCopies: number;
blackPrints: number;
colourCopies: number;
colourPrints: number;
cyan: number;
k1: number;
k2: number;
location: string;
magenta: number;
name: string;
serial: string;
yellow: number;
};
export function GetPrinters() {
const [printers, setPrinters] = useState<Printer[] | null>();
useEffect(() => {
axios.get(PRINTER_REST_API_URL).then((response) => {
setPrinters(response.data);
});
}, []);
return (
<>
{printers
? printers.map((printer) => {
return (
<tr key={printer.address}>
<td>{printer.location}</td>
<td>
<a
href={"//" + printer.address}
target="_blank"
rel="noopener noreferrer"
>
{printer.address}
</a>
</td>
<td>{printer.name}</td>
<td>{printer.serial}</td>
<td>{printer.black}</td>
<td>{printer.yellow}</td>
<td>{printer.magenta}</td>
<td>{printer.cyan}</td>
<td>{printer.k1}</td>
<td>{printer.k2}</td>
<td>{printer.blackPrints}</td>
<td>{printer.blackCopies}</td>
</tr>
);
})
: null}
</>
);
}
Any assistance is greatly appreciated.
Edit: Would it be better to achieve this with CSS or a script?