Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

186
Views
¿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 answers
Answer question

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 Report

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!