React App - render() - map () - mapping with if-else condition - reactjs

Question

I have my ReactApp created and would like to display a table with data from AWS dynamodb.
I successfully got data from dynamodb transferred to ReactApp with json, through map() in render() of ReactApp, I displayed the table as below:
How it looks now
So now i need to make the table like re-distributed as below:
How i want it to display
So I plan to render the table with if-else statement accordingly:
but once i put in if-else clause in the function, it didn't work and nothing displayed. So would like to seek advices from experts in stackoverflow :) many thanks in advance
Here is my code, the part I'm stuck is in the return section in render():
class App extends Component {
constructor(props) {
super(props);
this.state = {
hits: [],
isLoading: false,
error: null,
};
}
render() {
const { hits, isLoading, error } = this.state;
if (error) {
return <p>{error.message}</p>;
}
if (isLoading) {
return <p>Loading ...</p>;
}
return (
<form>
<div className="container border border-secondary rounded center">
<div className="row">
<div className="col-12">
{' '}
<h4>
<b>Class Mapping</b>
</h4>{' '}
</div>
</div>
<div className=".col-xs-12 center text-center">
<Table responsive striped bordered hover>
<tr>
<th>Class 1</th>
<th>Class 2</th>
<th>Class 3</th>
<th>Class 4</th>
<th>Class 5</th>
</tr>
<tbody>
{hits.map((hit) => {
if (hit.class === 'Class 1') {
<tr>
<td>{hit.name}}</td> <td></td> <td></td> <td></td> <td></td>{' '}
</tr>;
} else if (hit.class === 'Class 2') {
<tr>
<td></td>
<td>{hit.name}}</td> <td></td> <td></td> <td></td>{' '}
</tr>;
}
})}
</tbody>
</Table>
</div>
</div>
</form>
);
}
async componentDidMount() {
this.setState({ isLoading: true });
const response = await fetch('https://xxxxxxx');
const body = await response.json();
this.setState({ hits: body, isLoading: false, error: null });
}
}
export default App;

Answer 1

So you want to take an array that looks like this:
const hits = [
{ name: 'Tammy', class: 'Class 1' },
{ name: 'Sarah', class: 'Class 2' },
{ name: 'Roland', class: 'Class 3' },
{ name: 'Moshe', class: 'Class 4' },
{ name: 'Peter', class: 'Class 5' },
];
And transform it into an array of names, arranged into columns by their classname, like this:
const rows = [
['Tammy', 'Sarah', 'Roland', 'Moshe', 'Peter'],
['Helen', 'Eric', 'Fiona', 'Darren', 'Andy'],
];
Thats going to take a bit of work. I don't think that you will be able to accomplish it with if/else statement inside a few map functions.
Let's try this. I propose adding a class method to your component called getRows. This method will do the transformation. We start by iterating over your hits and grouping the names by class.
Then we setup a while loop, to push the names into the new rows array. While we still have names, keep building rows. Each row will pick a name according to the column and insert it.
Finally, when we are all out of names, we can return the rows to the render function. Then we map the rows, and map the columns in each rows. We also need unique keys for each mapped element.
getRows()
const getRows = () => {
const columns = ['Class 1', 'Class 2', 'Class 3', 'Class 4', 'Class 5'];
const rows = [];
const groupByColumn = this.state.hits.reduce((acc, next) => {
return { ...acc, [next.class]: [...(acc[next.class] || []), next.name] };
}, {});
const haveNames = () => columns.some((column) => (groupByColumn[column] || []).length > 0);
while (haveNames()) {
const newRow = columns.map((column) => {
return (groupByColumn[column] || []).shift() || '';
});
rows.push(newRow);
}
return rows;
};
The complete component:
import React, { Component } from 'react';
class App extends Component {
constructor(props) {
super(props);
this.state = {
hits: [],
isLoading: false,
error: null,
};
}
async componentDidMount() {
this.setState({ isLoading: true });
const response = await fetch('https://xxxxxxx');
const body = await response.json();
this.setState({ hits: body, isLoading: false, error: null });
}
getRows = () => {
const columns = ['Class 1', 'Class 2', 'Class 3', 'Class 4', 'Class 5'];
const rows = [];
const groupByColumn = this.state.hits.reduce((acc, next) => {
return { ...acc, [next.class]: [...(acc[next.class] || []), next.name] };
}, {});
const haveNames = () => columns.some((column) => (groupByColumn[column] || []).length > 0);
while (haveNames()) {
const newRow = columns.map((column) => {
return (groupByColumn[column] || []).shift() || '';
});
rows.push(newRow);
}
return rows;
};
render() {
if (this.state.error) {
return <p>{error.message}</p>;
}
if (this.state.isLoading) {
return <p>Loading ...</p>;
}
return (
<form>
<div className="container border border-secondary rounded center">
<div className="row">
<div className="col-12">
{' '}
<h4>
<b>Class Mapping</b>
</h4>{' '}
</div>
</div>
<div className=".col-xs-12 center text-center">
<Table responsive striped bordered hover>
<tr>
<th>Class 1</th>
<th>Class 2</th>
<th>Class 3</th>
<th>Class 4</th>
<th>Class 5</th>
</tr>
<tbody>
{this.getRows().map((row) => (
<tr key={row.reduce((a, b) => a + b)}>
{row.map((column) => (
<td key={column}>{column}</td>
))}
</tr>
))}
</tbody>
</Table>
</div>
</div>
</form>
);
}
}
export default App;
Example code
const hits = [
{ name: 'Tammy', class: 'Class 1' },
{ name: 'Camen', class: 'Class 2' },
{ name: 'Happy', class: 'Class 3' },
{ name: 'Hello Kitty', class: 'Class 4' },
{ name: 'Hello Mimi', class: 'Class 3' },
];
const getRows = (hits) => {
const columns = ['Class 1', 'Class 2', 'Class 3', 'Class 4', 'Class 5'];
const rows = [];
const groupByColumn = hits.reduce((acc, next) => {
return { ...acc, [next.class]: [...(acc[next.class] || []), next.name] };
}, {});
const haveNames = () => columns.some((column) => (groupByColumn[column] || []).length > 0);
while (haveNames()) {
const newRow = columns.map((column) => {
return (groupByColumn[column] || []).shift() || '';
});
rows.push(newRow);
}
return rows;
};
const rows = getRows(hits);
console.log(rows);