Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

195
Vistas
Botón para mostrar y ocultar elementos solo por ID - React Native

Actualmente, mi botón para mostrar y ocultar elementos funciona perfectamente. Tengo un JSON con múltiples entradas, quiero que cuando haga clic en el botón solo abra la entrada en la que hice clic. Mi problema es que si hago clic en 1 elemento, se muestran las otras ID.

Aquí está el código para una mejor explicación:

 getInitialState() { return { show_info: false } } ... const ARTags = this.state.nearbyPlaces.map((item) => { const imagen = item.imagen; const id = item.id; const showInfo = () => { this.setState({show_info: !this.state.show_info}); }; return ( ... <ViroImage onClick={showInfo} // onClick just for this id width={1.5} height={1.5} source={{uri: imagen}} position={[0,-1.5,0]} style={ {borderRadius: 1, borderWidth: 0.5, borderColor: '#ffffff'}} /> { this.state.show_info && <ViroImage height={2} width={4} position={[coords.x, 5, coords.z]} placeholderSource={require("./res/qr/local_spinner.jpg")} source={{uri: imagen_1}} /> } ....

Eso es solo un fragmento de mi código. Esa es la parte importante.

Como puede ver, itero a través de todos los elementos con "ARTags". El botón cambia de estado para ocultar y mostrar. Si hago clic, se muestran y se ocultan todos al mismo tiempo.

Repito: solo quiero mostrar y ocultar la ID de ese botón en el que hice clic.

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

 getInitialState() { return { show_info: false } } ... const ARTags = this.state.nearbyPlaces.map((item) => { const imagen = item.imagen; const id = item.id; const showInfo = (itemid) => { // set state to item.id this.setState({show_info: itemid}); }; return ( ... <ViroImage onClick={ () => showInfo(id) } {/* pass items id to showInfo */} // onClick just for this id key={id} width={1.5} height={1.5} source={{uri: imagen}} position={[0,-1.5,0]} style={ {borderRadius: 1, borderWidth: 0.5, borderColor: '#ffffff'}} /> { // check state equals this item's id this.state.show_info === id && <ViroImage key={`show${id}`} height={2} width={4} position={[coords.x, 5, coords.z]} placeholderSource={require("./res/qr/local_spinner.jpg")} source={{uri: imagen_1}} /> } ....
about 4 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 Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda