[UPDATE][React]: Sorting component not rendering data - reactjs

Question

I have a table view in which I am fetching data from an API and then populating that data inside a table.
For some reason, the data inside tbody is not rendering and there are no errors either. I think it could be because I am not destructuring it correctly. But, unable to rectify it.
PS: the console logs inside tbody does work and they do display the information in the console.
UPDATE: doing the same thing using a simple table from reactstrap and that one works. But the first one with the sorting table is not working. Not sure where I am going wrong. I WOULD LIKE TO GO WITH THE SORTING TABLE PREFERABLY.
Code for Table View
import React from "react";
import axios from "axios";
// reactstrap components
import {
Card,
CardHeader,
CardBody,
CardTitle,
Row,
Col,
Table,
} from "reactstrap";
// core components
import SortingTable from "components/SortingTable/SortingTable.js";
class RegularTables extends React.Component {
constructor(props) {
super(props);
this.state = {
siteData: [],
isLoading: false,
};
}
signal = axios.CancelToken.source();
componentDidMount() {
this.handleGetEdgeSeverInfo();
}
componentUnMount() {
this.signal.cancel("Api is being canceled");
}
handleGetEdgeSeverInfo = async () => {
this.setState({ isLoading: true });
await axios
.get("http://www.mocky.io/v2/5ec3786f300000800039c0a5")
.then((response) => {
// handle success
this.setState({ siteData: response.data });
})
.catch((error) => {
// handle error
if (axios.isCancel(error)) {
console.log("Unable to fetch", error.message);
} else {
this.setState({ isLoading: false });
}
});
};
render() {
const { siteData } = this.state;
return (
<>
<div className="content">
<Row>
<Col className="mb-5" md="12">
<Card>
<CardHeader>
<CardTitle tag="h4">
table (sorting table)
</CardTitle>
<hr />
</CardHeader>
<CardBody>
<SortingTable
thead={[
{ text: "Ship" },
{ text: "technology" },
{ text: "https" },
{ text: "type" },
{ text: "Status" },
]}
tbody={siteData.map((data) => {
console.log("name:", data.site.name);
console.log("type:", data.https);
console.log("IMO:", data.site.attributes.type);
console.log("model:", data.technology);
console.log("status:", data.status);
return (
<div>
<tr key={data.site}>
<td>{data.site.name}</td>
<td>{data.kind}</td>
<td>{data.site.attributes.IMO}</td>
<td>{data.model}</td>
<td>{data.status}</td>
</tr>
</div>
);
})}
/>
</CardBody>
</Card>
</Col>
<Col className="mb-5" md="12">
<Card>
<CardHeader>
<CardTitle tag="h4">
table (simple table from reactstrap)
</CardTitle>
<hr />
</CardHeader>
<CardBody>
<Table>
<thead>
<tr>
<th>Ship</th>
<th>Type</th>
<th>IMO</th>
<th>Model</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{siteData.map((site) => {
console.log("name:", data.site.name);
console.log("type:", data.https);
console.log("IMO:", data.site.attributes.type);
console.log("model:", data.technology);
console.log("status:", data.status);
return (
<div>
<tr key={data.site}>
<td>{data.site.name}</td>
<td>{data.kind}</td>
<td>{data.site.attributes.IMO}</td>
<td>{data.model}</td>
<td>{data.status}</td>
</tr>
</div>
);
})}
</tbody>
</Table>
</CardBody>
</Card>
</Col>
</Row>
</div>
</>
);
}
}
export default RegularTables;
Code for sorting table component
class SortingTable extends React.Component {
constructor(props) {
super(props);
this.state = {
bodyData: props.tbody,
column: {
name: -1,
order: "",
},
};
}
sortTable = (key) => {
let { bodyData, column } = this.state;
let order = "";
if (
(column.name === key && column.order === "desc") ||
column.name !== key
) {
order = "asc";
bodyData.sort((a, b) =>
a.data[key].text > b.data[key].text
? 1
: a.data[key].text < b.data[key].text
? -1
: 0
);
} else if (column.name === key && column.order === "asc") {
order = "desc";
bodyData.sort((a, b) =>
a.data[key].text > b.data[key].text
? -1
: a.data[key].text < b.data[key].text
? 1
: 0
);
}
this.setState({
bodyData: bodyData,
column: {
name: key,
order: order,
},
});
};
render() {
const { bodyData, column } = this.state;
return (
<Table className="tablesorter" responsive>
<thead className="text-primary">
<tr>
{this.props.thead.map((prop, key) => {
return (
<th
className={classnames(
"header",
{
headerSortDown:
key === column.name && column.order === "asc",
},
{
headerSortUp:
key === column.name && column.order === "desc",
},
{
[prop.className]: prop.className !== undefined,
}
)}
key={key}
onClick={() => this.sortTable(key)}
>
{prop.text}
</th>
);
})}
</tr>
</thead>
<tbody>
{bodyData.map((prop, key) => {
return (
<tr
className={classnames({
[prop.className]: prop.className !== undefined,
})}
key={key}
>
{prop.data.map((data, k) => {
return (
<td
className={classnames({
[data.className]: data.className !== undefined,
})}
key={k}
>
{data.text}
</td>
);
})}
</tr>
);
})}
</tbody>
</Table>
);
}
}
SortingTable.propTypes = {
thead: PropTypes.arrayOf(
PropTypes.shape({
className: PropTypes.string,
text: PropTypes.string.isRequired,
})
).isRequired,
tbody: PropTypes.arrayOf(
PropTypes.shape({
className: PropTypes.string,
data: PropTypes.arrayOf(
PropTypes.shape({
className: PropTypes.string,
text: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
.isRequired,
})
),
})
).isRequired,
};

Answer 1

I think you need to return a single <tr> in siteData.map. Try this in CardBody
<CardBody>
<SortingTable
thead={[
{ text: "site" },
{ text: "https" },
{ text: "technology" },
{ text: "type" }
]}
tbody={siteData.map(data => {
console.log("name:", data.site.name);
console.log("type:", data.https);
console.log("IMO:", data.site.attributes.type);
console.log("model:", data.technology);
console.log("status:", data.status);
return (
<tr key={data.site}>
<td>{data.site.name}</td>
<td>{data.https}</td>
<td>{data.site.attributes.type}</td>
<td>{data.technology}</td>
<td>{data.status}</td>
</tr>
);
})}
/>
</CardBody>;
In SortingTable.render()
render() {
const { bodyData, column } = this.state;
return (
<Table className="tablesorter" responsive>
<thead className="text-primary">
<tr>
{this.props.thead.map((prop, key) => {
return (
<th
// className={classnames(
// "header",
// {
// headerSortDown:
// key === column.name && column.order === "asc"
// },
// {
// headerSortUp:
// key === column.name && column.order === "desc"
// },
// {
// [prop.className]: prop.className !== undefined
// }
// )}
key={key}
onClick={() => this.sortTable(key)}
>
{prop.text}
</th>
);
})}
</tr>
</thead>
<tbody>
{bodyData.map((prop, key) => {
return (
<tr
// className={classnames({
// [prop.className]: prop.className !== undefined
// })}
key={key}
>
{prop.props.children.map((data, k) => {
return (
<td
// className={classnames({
// [data.className]: data.className !== undefined
// })}
// key={k}
>
{data.props.children}
</td>
);
})}
</tr>
);
})}
</tbody>
</Table>
);
}
I Commented out some code to easily reproduce the issue