Me aparece que la map no es una función como vemos en la siguiente imagen
El código es el siguiente:
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>
)
}
}
Esto es el codigo donde obtengo los datos
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>
);
}
}
lo que el console.log(products)
me arroja es el siguiente imagen
la imagen como pueden observar me lanza datos vacio despues me lanza ya con datos de la base de datos
Alguien que sepa como puedo solucionar esto estoy siguiendo los pasos de este tutorial si quieren para mas informacion https://www.youtube.com/watch?v=lJsgUOj73zg
map
products
. Verifica conconsole.log
su contenido. Si es que eventualmente vienenull
oundefined
, haz la validación correspondiente dentro de tu componenteListProduct
.