Estoy tratando de representar dinámicamente algunos componentes que asignan una matriz de objetos de una llamada API. No puedo entender la sintaxis de este.
Tengo que buscar desde esta url:
https://fakestoreapi.com/productsY para cada objeto de la matriz, tengo que representar Product.js dentro de ProductContainer.js.
ProductoContenedor.js:
import axios from "axios"; import React, { useState, useEffect } from "react"; import "../styles/ProductContainer.scss"; import Product from "./Product"; const ProductContainer = () => { const [productArray, setProductArray] = useState(""); const [imgUrl, setImgUrl] = useState(""); const [nameUrl, setNameUrl] = useState(""); const [priceUrl, setPriceUrl] = useState(""); useEffect(() => { axios.get("https://fakestoreapi.com/products").then((res) => { setProductArray(res.data); setImgUrl(res.data.image); setNameUrl(res.data.title); setPriceUrl(res.data.price); }); }, []); return ( <div className="product-container"> {productArray.map((e) => { <Product imgUrl={imgUrl} nameUrl={nameUrl} priceUrl={priceUrl} />; })} </div> ); }; export default ProductContainer;¡Gracias!
La image , el title y price son propiedades de cada producto, no de la respuesta completa de la API.
Además, productArray debe inicializarse en una matriz y no en una cadena.
Asi que
import axios from "axios"; import React, { useState, useEffect } from "react"; import "../styles/ProductContainer.scss"; import Product from "./Product"; const ProductContainer = () => { const [productArray, setProductArray] = useState([]); useEffect(() => { axios.get("https://fakestoreapi.com/products").then((res) => { setProductArray(res.data); }); }, []); return ( <div className="product-container"> {productArray.map((product) => { <Product imgUrl={product.image} name={product.name} price={product.price} />; })} </div> ); }; export default ProductContainer;