Como añadir filtros a tu Blog creado en Next.js o React
by Lara Alonso
Vamos a ver paso a paso como hacerlo en Next.js.
Lo primero deberás tener un archivo data.js o tener guardado un array con los datos de tus post en una base de datos.
const data = [{id:1,category: ¨Javascript¨,title: ¨Usando JavaScript¨},{id:2,category: ¨Node.js¨,title: ¨Usando Node.js¨},{id:3,category: ¨React¨,title: ¨Usando React¨},{id:4,category: ¨Next.js¨,title: ¨Usando Next.js¨}
Ahora en tu App.jsx realizarás los filtros.
import {useState} from ¨react¨import data from ¨./data/data¨
function App ( ) {
const allCategories = [¨Borrar filtros ¨,...new Set(data.map(article =› article.category)),]const [categories, setCategories] = useState(allCategories);const [articles, setArticles] = useState(data);
const filterCategory = (category) =› {if (category === ¨Borrar filtros¨) {setArticles(data)return}const filteredData = data.filter(article =› article.category === category);setArticles(filteredData)}
return (‹ div ›{categories.map ( category =› (‹buttontype=¨button¨className=¨btn-category¨ onClick=[() =› filterCategory(category)} key={category}›{category}‹ /button›))}‹ /div ›
‹ div ›{articles.map ( article =› (‹ div key={article.id}›‹ div ›‹ h2 › {article.title} ‹ /h2 ›‹ div ›‹ div ›))}‹ /div ›);
En allCategories definimos los filtros, ¨Borrar filtros¨ y el resto de categorías que extraemos de la data
Creamos dos estados uno para categorías con un valor inicial de allCategories y otro para que se muestren los artículos filtrados donde está en principio toda la data.
Con filterCategory, se realiza un filtro salvo que la variable sea Borrar filtros donde se vuelven a cargar todas las categorías.
Lo que devolvemos por pantalla es un map de categories para que nos devuelva las diferentes categorías y otra de artículos para que nos devuelva los artículos filtrados.
No he añadido los estilos para que quede más limpio el código.
Creamos dos estados uno para categorías con un valor inicial de allCategories y otro para que se muestren los artículos filtrados donde está en principio toda la data.
Con filterCategory, se realiza un filtro salvo que la variable sea Borrar filtros donde se vuelven a cargar todas las categorías.
Lo que devolvemos por pantalla es un map de categories para que nos devuelva las diferentes categorías y otra de artículos para que nos devuelva los artículos filtrados.
No he añadido los estilos para que quede más limpio el código.
Espero que os haya servido¡¡¡
Podéis leer otros artículos de Next.js en mi blog como Cómo utilizar React y Next.js para construir sitios web de alto rendimiento
Lara Alonso @aiadevop
Soy desarrolladora de software en España. Especializada en frontend, creo experiencias web y aplicaciones. Explora mi portfolio y descubre mis proyectos.
¡Tu visión mi código!