Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

73
Vistas
i want to use the Url id as a filter of an array

Im trying to put a variable in this case match.params.id into a map filter as a parameter. I want to be able to change my filter based on the URL ID return. I have put a code example bellow with some comments to further explain.

const allItems = [
{
title: item1,
itemColorBlack: 1,
itemColorWhite: 0
},
{
title: item2,
itemColorBlack: 0,
itemColorWhite: 1}
]
const itemlist = allItems.filter(
  function (item) {
    //So i want to be able with the change of the url display the itemColors.
    //In this example props.params.id returns "itemColorBlack" Url /itemColorBlack
    const itemsearch = props.match.params.id;

    //The output should only show the items where the output of itemColorBlack is 1 
    //In this case the element with the title item1. and if i change the url to 
    //itemColorWhite it should show the element with the title = item2
    return item.itemsearch == 1
   )}
.map((item) => {
  return <ItemContainer item=item />
 })

Hopefully this made sense if i need to elaborate further dont hesitate to send a message :)

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

I think you need to fetch that url first , then you extract the id passed in the url via req.query store it a state variable [color,setColor]; and put your code in useEffect hook that runs when color changes ;

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda