ReactJS: fetch from api print not just one time - reactjs

Question

I got a table, filled by data coming from my API, I'm learning React and come to the solution in several tries.
Now I got the data printed in my table, but, these data is repeated three times (as the rows number multiplied by row number).
Here is my code:
import React from "react";
// reactstrap components
import {Card, CardHeader, CardBody, Row, Col, Breadcrumb, BreadcrumbItem, CardTitle, Button, Table} from "reactstrap";
// core components
import PanelHeader from "components/PanelHeader/PanelHeader.jsx";
class Registries extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoaded: false,
error: null,
articles: [],
};
}
componentDidMount() {
fetch('http://127.0.0.1:8004/api/articles/all/')
.then(results => {
return results.json();
})
.then(data => {
let articles = data.map((row) => {
return(
<tr key={row.id}>
<td>{row.id}</td>
<td>{row.name}</td>
<td>{row.category}</td>
<td style={{width:"106px"}}>
<Button size={"sm"} color={"warning"}>
<i className={"fa fa-edit"} />
</Button>
<Button size={"sm"} color={"danger"}>
<i className={"fa fa-trash"} />
</Button>
</td>
</tr>
)
});
this.setState({
isLoaded: true,
articles: articles
});
console.log(articles);
})
}
render() {
return (
<>
<PanelHeader size="sm" />
<div className="content">
<Row>
<Col xs={12}>
<Card>
<CardHeader>
<Breadcrumb>
<BreadcrumbItem>Home</BreadcrumbItem>
<BreadcrumbItem active>Articoli</BreadcrumbItem>
</Breadcrumb>
<Row>
<Col xs="10">
<CardTitle tag="h4">Articoli</CardTitle>
</Col>
<Col xs="2">
<Button icon="ui-1_simple-add" size="lg" color="success" outline className={"btn-block"}>
<i className={"fa fa-plus"} /> Nuovo
</Button>
</Col>
</Row>
</CardHeader>
<CardBody>
<Table data={this.state.articles} responsive className={"table-hover"}>
<thead className="text-primary">
<tr>
<th>ID</th>
<th>Nome</th>
<th>Categoria</th>
<th style={{width:"106px"}}>Opzioni</th>
</tr>
</thead>
<tbody>
{this.state.articles.map((prop, key) => {
if(this.state.error) {
return(<div>Error: {this.state.error.message}</div>);
}
else if(this.state.isLoaded === false) {
return(
<div>
<i className={"fa fa-spin fa-spinner"}/>
<br/>
Caricamento...
</div>
);
}
else if(this.state.articles) {
return (
<>
{this.state.articles.map((prop, key) => {
return <>{prop}</>;
})}
</>
);
}
})}
</tbody>
</Table>
</CardBody>
</Card>
</Col>
</Row>
</div>
</>
);
}
}
export default Registries;
Here is how the table looks like:
The goal is to get only 3 rows, as the API return

Answer 1

You are calling this.state.articles.map in another this.state.articles.map in your render function.
Try to refactor this part of code:
{this.state.articles.map((prop, key) => {
if(this.state.error) {
return(<div>Error: {this.state.error.message}</div>);
}
else if(this.state.isLoaded === false) {
return(
<div>
<i className={"fa fa-spin fa-spinner"}/>
<br/>
Caricamento...
</div>
);
}
else if(this.state.articles) {
return (
<>
{this.state.articles.map((prop, key) => {
return <>{prop}</>;
})}
</>
);
}
})}
One of possible refactorings could be like this:
{
this.state.error ?
(<div>Error: {this.state.error.message}</div>) :
(
this.state.isLoaded === false ?
(
<div>
<i className={"fa fa-spin fa-spinner"}/>
<br/>
Caricamento...
</div>
) :
(
this.state.articles && this.state.articles.map((prop, key) => {
return (<>{prop}</>);
})
)
)
}