It appears to me that the map is not a function as we see in the following image
The code is the following:
class ListProduct extends Component {
render(){
const {products}=this.props;
console.log(products);
return(
<Table>
<thead>
<tr>
<th>id</th>
<th>Nombre</th>
</tr>
</thead>
<tbody>
{
products.map(product=>(
<tr key={product.id_persona}>
<td>{product.Nombre}</td>
<td>
<Button color="info" size="sm">Edit</Button>
<Button color="danger" size="sm">Delete</Button>
</td>
</tr>
))
}
</tbody>
</Table>
)
}
}
This is the code where I get the data
export default class ProductBox extends Component{
Url='http://localhost:3005/';
state={
products:[],
}
componentDidMount(){
fetch(this.Url)
.then(response=>response.json())
.then(products=>this.setState({products}))
.catch(e=>console.log(e));
}
render(){
return(
<div className="row">
<div className="col-md-6">
<h2 className="font-smaller text-center">
Cadastro de Productos
</h2>
<FormProduct/>
</div>
<div className="col-md-6">
<h2 className="font-smaller text-center">
Lista de Productos
</h2>
<ListProduct products ={this.state.products}/>
</div>
</div>
);
}
}
what he console.log(products)
throws at me is the following image
As you can see, the image throws me empty data, then it throws me with data from the database.
Someone who knows how I can solve this I am following the steps of this tutorial if you want more information https://www.youtube.com/watch?v=lJsgUOj73zg
It happens because products at some point is not an array so when you do a map it is not defined.
The problem comes when you do setState on the fetch response.
products is not the array of products but an object with the cable products, when you do setState the state of the component is
You can fix it by deconstructing the response in the then by adding two curly braces