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.
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}} /> } ....