Quantcast
Channel: How to refer to a single element of a mapped array to render a View - Stack Overflow
Viewing all articles
Browse latest Browse all 2

How to refer to a single element of a mapped array to render a View

$
0
0

I've got an array of object. I mapped it to render it like a list with a label and an icon button. I need to show another View below the element of the row when I hit the button.

The array of object is a let variable. I would have like to make it as a state (because of the re-rendering when a function setState is executed), but I need it as a let variable because they are datas coming from a navigation route

My idea was to add a flag in every object of the array to indicate when the View has to be rendered. This would have been false at the beginning and true when I hit the button, but nothing happen. While if don't use a flag when I hit the button, the View is rendered in every row

state={
   visible:false
}

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

btnHandler = (item) => {
   item.showViewBelow = true;
   this.setState({visible:true})
}


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

   let array = [
            {
                id:'0',
                label: arrayNav.label1,
                showViewBelow: false
            },
            {
                id:'1',
                label: arrayNav.label2,
                showViewBelow: false
            },
            {
                id:'2',
                label: arrayNav.label3,
                showViewBelow: false
            }
   ]
return(
  <View>
     array.map((item, key)=> { return

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

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

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

              {this.getNewView(item)}

         </View>)

     )}
  </View>
)
 }

So, when i click in a row of the list, I want a new view to be showed below THIS row.

I tried to switch to true the flag in one of the object and leave it to false in the others. It works fine on that line! When I click the button in that row, the new view is correctly rendered below that row.

I tried also using a Flatlist and put some extradata with a state variable to be updated with a setState after the return of the new view. (just to try to re-render the page).

Still, I tried to put this.forceUpdate() in the getNewView method. Nothing happen. Nothing is rendered

So I think the problem is I don't re-render the whole screen, because having the object as let variable, this doesn't happen.

Have any ideas?


Viewing all articles
Browse latest Browse all 2

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>