• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

112
Vistas
La mejor manera de cambiar CSS en múltiples componentes del mismo componente en React

Tengo un componente que estoy usando 3 veces con diferentes datos que puedo completar con el siguiente código;

 <div> <Container className="mt-5"> <Row> {author_data.map((authors) => { return ( <Col key={authors.id} className="pe-5 ps-5"> <Author key={authors.id} image={authors.image} author={authors.author} description={authors.description} handleClick={(author) => setAuthor(author)} /> </Col> ); })} </Row> </Container> </div> );

Sin embargo, estoy buscando cambiar el CSS en cada componente una vez que hago clic en uno de los componentes de Autor. algo como lo siguiente usando JS nativo.

 document.getElementById("author1").classList.add("addGrayScale"); document.getElementById("author2").classList.add("addGrayScale"); document.getElementById("author3").classList.remove("addGrayScale");

He usado los ganchos useState y useContext pero parece que no puedo hacer que funcione porque el componente Author recibirá los mismos apoyos. ¿Debo crear componentes separados para cada autor? O hay otra manera de hacer esto.

almost 3 years ago · Juan Pablo Isaza
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 Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda