React-Native How to change state value for each item?

Question

I have a 'touchableOpacity' where each time its pressed it shows the selected value, but when a value is selected every item gets that value.

I need to do it this way: item 1 -> selectedValue3 item 2 -> selectedValue1...

{ this.state.proyectosConTodo.map((item,index)=>{ return (

<View style={{paddingBottom:12}}>
  <Grid>
   <Col>
    <View style={{height:40,justifyContent: 'center'}}>
      <Text numberOfLines={1} allowFontScaling={false} style={{color: '#45526e',fontFamily: 'Roboto-Regular',fontSize:15, alignSelf: 'flex-start'}}>{item.proyecto.titulo}</Text>
    </View>
    </Col>
    <Col>
    <TouchableOpacity style={{ height:40,borderWidth:1, borderRadius:4, borderColor: '#e0e4eb', justifyContent: 'center',backgroundColor: '#f3f4f6'}} onPress={()=>{ this.setAgentesReasignarEnviar(item,index) }}>
      <Text allowFontScaling={false} style={{color: '#45526e',fontFamily: 'Roboto-Medium',fontSize:15, marginLeft:10,marginRight:10}}>{this.state.txt_agenteProyecto}</Text>
      <Icon style={{position: 'absolute',top:13,right:10}} name={ 'chevron-down'} size={10} color={ '#45526e'}/>
    </TouchableOpacity>
    </Col>
  </Grid>
</View>
) }) }

score 1 · Answer 1 · answered Nov 15 '19 at 03:35

I think this is what you need:

setAgentesReasignarEnviar(item, index) {
    const result = this.state.proyectosConTodo.map(() => return item);
    this.setState({
        proyectosConTodo: result
    });
}

For more detail, check this out: How to replace all undefined values in an array with "-" ?

score 1 · Accepted Answer · answered Nov 15 '19 at 03:38

From your snippet it seems that your structure is that one screen with a FlatList or something similar that renders multiples of your TouchableOpacity components. The problem is that every time a single TouchableOpacity is clicked it changes the state of the screen(not just itself) causing all touchable opacities to have that value.

One possible solution is the create another component which renders your list item and has its own state. The item used to render it can be passed as a prop and then calling setState inside that component will not affect the other list items.

React-Native How to change state value for each item?

2 Answers2