React Native How to hide and show exact one view with key value

Question

I want to make hide and show each view which have {param.body} in the list when I onPress the each TouchableOpacity. But all of my list view is hiding and showing when I onPress only one. How can I make only one view hide and show?

I've got the key value in each View.

this is my code

const DOWN_ARROW = require('../assets/images/ic_arr_down.png');
const UP_ARROW = require('../assets/images/ic_arr_up.png');

export default class Schedule extends Component{
    constructor(props){
        super(props);
        this.state = {showbody : true, activeImage : true}
    }
    toggleBody = () =>{
        this.setState({showbody : !this.state.showbody, activeImage : !this.state.activeImage,})
    }
    data = {
        contents: [
            {
                date: '4/3',
                money: '$15000',
                body: 'this is component 1',
            },
            {
                date: '4/4',
                money: '$200000',
                body: 'this is component 2',
            },
        ]
    }
    render() {
        let arrowImage = this.state.activeImage ? DOWN_ARROW : UP_ARROW;
        return(
            <View style = {styles.container}>
                <ScrollView style={{alignSelf: 'stretch'}}>
                    {
                        this.data.contents ? this.data.contents.map((param, i) => {
                            return(
                                <View>
                                    <View style={styles.dropdown} key={i}>
                                        <Text style={{fontSize: 16}}>{param.date}</Text>
                                        <TouchableOpacity style={{backgroundColor: 'blue'}} onPress={this.toggleBody}>
                                             <Image source={arrowImage}/>
                                        </TouchableOpacity>
                                    </View>
                                    {this.state.showbody ? (<View><Text>{param.body}</Text></View>) : null}

                                </View>
                            );
                        })
                        : null
                    }
                </ScrollView>
            </View>
        )
    }
}

I expect when I press image on view which key is 1, the view right below that contains {param.body} do hide and show. but all of the view is hide and showing. :(

Here's link to hide the components . You can see if that helps. — rabbilyasar, Jul 16 '19 at 07:42
@rabbilable Thanks! I read that but I still can't solve my problems... my view is working on hide and showing but whole view in my list is hiding and I want to get only one view on list. — Ben, Jul 16 '19 at 07:54

score 1 · Accepted Answer · answered Jul 16 '19 at 10:11

This is most common type of problem most beginners face while start to work in React/React Native.You got to do like this.

1.Maintain a variable activeItem in state which by the name is holding the current active item.

2.Update this variable onPress inside the loop like this.

 updateActiveItem=itemIndex=>{
   this.setState({activeItem:itemIndex})
 }
 ....
 ....
render(){
  return(
   <View>
     {
       someArrayofItems.map((item,index)=>{
         return(
           <View>
              <Touchable onPress={()=>this.updateActiveItem(index)}>
                ...
              </Touchable>
             {this.state.activeItem===index &&(SOME VIEW YOU WANT TO SHOW 
                 CONDITIONALLY)}
          </View>
        )
       }) 
     }
   </View>
  )
}

It works! Thank you for solving my problems! Have a nice day :D — Ben, Jul 18 '19 at 07:20

score 0 · Answer 2 · answered Jul 16 '19 at 08:03

Follow this steps:- 1. Take one variable temp which will be empty on first time 2. Now on click of tochableopacity store that particluar item key in variable. 3. The condition of show view will like this

this.state.temp == param.keyvalue ? "show your view" : null

So it will work easily.
I suggested to use flatlist instead of this.

React Native How to hide and show exact one view with key value

2 Answers2