Currently, I am working on a task to count letters and display them in a table. The existing table is functional but has too many rows and incorrect counts.
| A | 2 |
|---|---|
| B | 3 |
| C | 1 |
I aim for the output to resemble the following:
import {
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow
} from "@material-ui/core";
import "./styles.css";
const letters = ["A", "A", "B", "B", "B", "C"];
const Row = (letter: string) => (
<TableRow>
<TableCell>{letter}</TableCell>
<TableCell>{letters.lastIndexOf(letter)}</TableCell>
</TableRow>
);
export default function App() {
return (
<div className="App">
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>letter</TableCell>
<TableCell>count</TableCell>
</TableRow>
</TableHead>
<TableBody>{letters.map(Row)}</TableBody>
</Table>
</TableContainer>
</div>
);
}