Quantcast
Viewing all articles
Browse latest Browse all 2

Answer by Nooruddin Lakhani for How to refer to a single element of a mapped array to render a View

You can create method in constant utility to define defaultArray like

getDefaultArray(arrayNav){

    return [
        {
            id:'0',
            label: arrayNav.label1,
            showViewBelow: false
        },
        {
            id:'1',
            label: arrayNav.label2,
            showViewBelow: false
        },
        {
            id:'2',
            label: arrayNav.label3,
            showViewBelow: false
        }
   ];

}

In your component code

import Constants from "./Constants"

ComponentDidMount(){

    const {navigation} = this.props;
    const arrayNav = navigation.getParam('data', '');

    this.state={
        visible:false,
        array = Constants.getDefaultArray(arrayNav);
    }
}

getNewView = (item) => {
        if (this.state.visible && item.showViewBelow)
            return (
                <View>
                    <HiddenViewComponent/>
                </View>
            )
};

btnHandler = (item, index) => {

   const {navigation} = this.props;
   const arrayNav = navigation.getParam('data', '');

   let newData = Constants.getDefaultArray(arrayNav);
   newData[index].showViewBelow = true;
   this.setState({visible:true , array:newData})
}

render(){

    return(
      <View>
         this.state.array.map((item, key)=> { return

             <View key = {key} style={{marginHorizontal: 25}}>

                  <Text>{item.label}</Text>

                  <TouchableOpacity onPress={this.btnHandler(item,key)}>
                     <Image source=(blablabla)/>
                  </TouchableOpacity>

                  {this.getNewView(item)}

             </View>)

         )}
      </View>
    )
 }

Viewing all articles
Browse latest Browse all 2

Trending Articles