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

193
Visualizações
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 Respostas
Responde à pergunta

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