只按ID显示和隐藏元素的按钮-React Native

Question

目前我的显示和隐藏项目按钮工作得很好。我有一个有多个输入的JSON，我希望当我点击按钮时，它只打开我点击的输入。我的问题是，如果我点击1个元素，就会显示其他ID。

以下是更好解释的代码：

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

这只是我代码的一个片段。这是重要的部分。

正如你所看到的，我用"；ARTags"；。该按钮将状态更改为隐藏和显示。如果我点击，它们会同时显示和隐藏。

我重复一遍：我只想显示和隐藏我点击的按钮的ID。

Answer 1

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