Entonces, estoy tratando de devolver los datos de la API por mapa y cuando estoy usando () estos corchetes, obtengo los datos cuando uso {} para poner la declaración if, no obtengo nada en mi página web, pero sigo recibiendo los datos consola
const Addtocart = () => { const data = useSelector((state) => state); console.log("products", data.productData); const dispatch = useDispatch(); useEffect(() => { dispatch(productList()); }, []); return ( <div id="addtocart-info"> <div className="products"> {data.productData.map((item) => { // here this bracket if (item.id % 2 === 0 || item.id === 0) { <div key={item.id} className="product-item"> <img src={item.photo} alt="" /> <div>Name : {item.name} </div> <div>Color : {item.color} </div> <button onClick={() => dispatch(addToCart(item))}> ADD to Cart </button> </div>; console.warn(item.id); } else { console.log(item.id); } })} </div> </div> ); }; export default Addtocart;¿Hay alguna forma de poner la declaración if con () o hacer que esto funcione?
No está obteniendo nada porque cuando usa {} tiene que usar una palabra clave de retorno, pero cuando usa () no tiene que usar una palabra clave de retorno porque todo el código dentro de esto se considera como una sola pieza de código incluso si está distribuido en varias líneas, cambie su código a,
{data.productData.map((item) => { // here this bracket if (item.id % 2 === 0 || item.id === 0) { return ( <div key={item.id} className="product-item"> <img src={item.photo} alt="" /> <div>Name : {item.name} </div> <div>Color : {item.color} </div> <button onClick={() => dispatch(addToCart(item))}> ADD to Cart </button> </div> ) } else { console.log(item.id); } })}Si usa corchetes, también necesita usar una declaración de return . Básicamente, si no usa corchetes en una función de flecha, la declaración se devuelve automáticamente.
Ejemplo:
let x = someArray.map(x => x*2); // returns a new array with the expression applied let x = someArray.map(x => {return x * 2}) // use the return here