Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

74
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda