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

187
Visualizações
¿Cómo cambiar el valor específico de setState en una matriz de objetos en el evento onClick?

Quiero cambiar la clase activa en mi estado local al hacer clic y cambiar inActive a todos los demás objetos en el estado.

 const [jobType, setJobType] = useState([ { "class": "active", "type": "All Jobs" }, { "class": "inActive", "type": "My Jobs" }, { "class": "inActive", "type": "Saved Jobs" }, ]) const jobTypeClick = (event, item) =>{ alert("I am clicked") console.log(item) setJobType(...jobType, jobType.class:"active") } const jobTypes = jobType.map((data) => { return ( <p className={data.class+" mb-0 px-3 secondary-font fs-16"} key={data.type} onClick={event => jobTypeClick(event, data.type)}>{data.type}</p> ) })
about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

Esta solución funcionará, pero tenga en cuenta que el type debe ser único

 const jobTypeClick = (event, item) => { setJobType(jobType.map(t => { return { ...t, "class": (t.type === item) ? "active" : "inActive" } })) }

De lo contrario, puede pasar el índice del elemento a la función, lo que le asegura la unicidad dentro de un Array . Otra buena característica es pasar una devolución de llamada a set . La devolución de llamada recibirá el valor más reciente, lo que le permitirá usar esta función incluso dentro de la lógica asíncrona.

 const jobTypeClick = (event, index) => { setJobType(current => current.map((t, ix) => ({ ...t, "class": (ix === index) ? "active" : "inActive" })); }
about 4 years ago · Juan Pablo Isaza Relatório

0

Lo que está haciendo en setJobType es incorrecto setJobType(...jobType, jobType.class:"active")
Para establecer JobType, debe pasar una matriz con valor actualizado

Debe hacer un bucle de todos los JobTyes y hacer que la clase sea "inactiva" para todos los objetos y hacer que el que tenga el mismo índice de clic sea "activo"

Puede usar el siguiente código. He agregado un tercer argumento para leer el índice del elemento de clic y hacer un bucle de todos los tipos de trabajo y hacer que el correcto sea activo y otro inactivo.

 const [jobType, setJobType] = useState([ { "class": "active", "type": "All Jobs" }, { "class": "inActive", "type": "My Jobs" }, { "class": "inActive", "type": "Saved Jobs" }, ]) const jobTypeClick = (event, item, i ) =>{ alert("I am clicked") console.log(item) let prevJobType = [...jobType]; prevJobType.map((d,index) => {...d, class: index == i ? "active" : "inActive") setJobType(prevJobType) } const jobTypes = jobType.map((data, i) => { return ( <p className={data.class+" mb-0 px-3 secondary-font fs-16"} key={data.type} onClick={event => jobTypeClick(event, data.type, i)}>{data.type}</p> ) })
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