En las categorías.mapa((categoría) => () Necesito invertir los elementos de las categorías.mapa y verificar la categoría.isFeatured antes de hacer un enlace, pero no me permite hacer una declaración if.
const Header = () => { const [categories, setCategories] = useState([]) useEffect(() => { getCategories().then((newCategories) => setCategories(newCategories)) }, []) return ( <div className="container mx-auto mb-8 px-10"> <div className="inline-block w-full border-b border-blue-400 py-8"> <div className="block md:float-left"> <span className="cursor-pointer text-4xl font-bold text-white"> <Link href={'/'}>CRBStuffReviews</Link> </span> </div> <div className="hidden md:float-left md:contents"> {categories.map((category) => ( <Link key={category.slug} href={`/category/${category.slug}`}> <span className="mt-2 ml-4 cursor-pointer align-middle font-semibold text-white md:float-right"> {category.name} {console.log(category.name)} </span> </Link> ))} </div> </div> </div> ) }Intentalo:
<div className="hidden md:float-left md:contents"> {mrGlobalRequest?.map((category) => { if (category.isFeatured) return ( <div key={category.slug} href={`/category/${category.slug}`}> <span className="mt-2 ml-4 cursor-pointer align-middle font-semibold text-white md:float-right"> {category.name} {console.log(category.name)} </span> </div> ); })} </div>Bravo tiene razón en Array.reverse en los comentarios.
También debe agregar {} en el .map, verificar category.isFeatured y eliminar cualquier valor nulo (o obtendrá filas en blanco).
Por ejemplo, lo siguiente invertirá el orden, devolverá el enlace si category.isFeatured, de lo contrario devolverá nulo. Finalmente, eliminará todos los nulos con filtro (booleano), un truco ingenioso:
import React, { useState, useEffect } from "react"; const Header = () => { const [categories, setCategories] = useState([]); useEffect(() => { getCategories().then((newCategories) => setCategories(newCategories)); }, []); return ( <div className="container mx-auto mb-8 px-10"> <div className="inline-block w-full border-b border-blue-400 py-8"> <div className="block md:float-left"> <span className="cursor-pointer text-4xl font-bold text-white"> <Link href={"/"}>CRBStuffReviews</Link> </span> </div> <div className="hidden md:float-left md:contents"> {categories .reverse() .map((category) => { return category.isFeatured ? ( <Link key={category.slug} href={`/category/${category.slug}`}> <span className="mt-2 ml-4 cursor-pointer align-middle font-semibold text-white md:float-right"> {category.name} {console.log(category.name)} </span> </Link> ) : null; }) .filter(Boolean)} </div> </div> </div> ); };En la función de devolución de llamada del mapa, debe usar corchetes
{}
Dentro del corchete puede usar la instrucción IF
Entonces, su código se verá así
const Header = () => { const [categories, setCategories] = useState([]) useEffect(() => { getCategories().then((newCategories) => setCategories(newCategories)) }, []) return ( <div className="container mx-auto mb-8 px-10"> <div className="inline-block w-full border-b border-blue-400 py-8"> <div className="block md:float-left"> <span className="cursor-pointer text-4xl font-bold text-white"> <Link href={'/'}>CRBStuffReviews</Link> </span> </div> <div className="hidden md:float-left md:contents"> {categories.map((category) => { if(category.isFeatured){ return( <Link key={category.slug} href={`/category/${category.slug}`}> <span className="mt-2 ml-4 cursor-pointer align-middle font-semibold text-white md:float-right"> {category.name} {console.log(category.name)} </span> </Link> )}})} </div> </div> </div> ) }