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

0

178
Vistas
¿Cómo agregar elementos a la lista de observación en reactJs?

Estoy tratando de averiguar cómo puedo agregar los artículos a la lista de seguimiento,

Los pasos que estoy tratando de llevar a cabo aquí son, cuando un usuario hace clic en el botón Agregar, los elementos deben agregarse a la página/componente de la lista de seguimiento que he creado.

Consulte la jerarquía del componente. Me gustaría mostrar los elementos agregados en la página de la lista de observación.

ingrese la descripción de la imagen aquí

Por favor, vea el código que probé.

 const [watchlist, setWatchlist] = useState ([]); const handleWatchlist = (movieData) => { const newList = [...watchlist, movieData] setWatchlist(newList) console.log(newList) } <Button className = {classes.cardButton}size = "small" onClick = { ()=> handleWatchlist(movie) }> Add </Button>

Cuando trato de inspeccionar, el resultado es que muestra que los elementos se agregaron pero no se pueden pasar al componente de la lista de vigilancia. ¿Cómo se puede usar un accesorio para pasar este valor y mostrarlos?

![ingrese la descripción de la imagen aquí

Cualquier ayuda es muy apreciada.

Un millón de gracias

almost 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

El Button no pasa ningún argumento en handleWatchlist en su ejemplo. No sé cómo se ve el componente Button , pero pasar el argumento podría parecerse al siguiente ejemplo:

 const Button = ({ onClick }) => { const value = "some value"; return <button onClick={() => onClick(value)}>Button</button>; }; const WatchList = () => { ... return <Button onClick={handleWatchlist}>Add</Button>
almost 3 years ago · Juan Pablo Isaza Denunciar

0

Gracias por el apoyo, pero descubrí la solución usando dos enfoques y son

Que es la perforación de accesorios, es decir, es realizar la acción useState en mi App.js, que es mi página principal donde tengo el producto y el componente de lista de seguimiento.

Esta es la mejor manera que sugeriría que otras personas también usen usando contextAPI y useContext hooks . Una manera simple y fácil de pasar cualquier dato a cualquier parte de la aplicación.

Consulte el código completo con la solución de trabajo a continuación en codesandbox.

https://codesandbox.io/s/determinado-ruiseñor-m2mtn?file=/src/components/Productos

La aplicación de trabajo, donde puedo agregar los productos a la lista de observación.

aplicación de demostración de trabajo

almost 3 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 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