How can I change the state of an array item in React Native

Question

How can I change the state of an array item in React Native

Navigation

#1 by (1 votes)

0

I have a list that is loaded after the api returns, this list populates a FlatList. By clicking on any item I would like to mark it with the status it was viewed: userViu

How can I change the item just clicked.

[
  {
    "id": 3,
    "codigoCondominio": "1212",
    "dataVencimento": "2018-03-10T00:00:00",
    "descricao": "Pagamento de taxa de licenciamento",
    "valor": 23900.9,
    "flagBloqueio": false,
    "dataBloqueio": null,
    "idUsuarioConcordou": null,
    "createTime": "2018-03-23T01:35:29.957",
    "arquivado": false,
    "dataPagamento": null,
    "numeroLancamento": 0,
    "codigo": "1212",
    "nome": "Edificio 0001",
    "usuarioViu": null,
    "flagVisualizado": null,
    "vencido": true
  },
  {
    "id": 4,
    "codigoCondominio": "1212",
    "dataVencimento": "2018-03-10T00:00:00",
    "descricao": "Pacto administradora",
    "valor": 45000,
    "flagBloqueio": true,
    "dataBloqueio": null,
    "idUsuarioConcordou": null,
    "createTime": "2018-03-23T01:36:06.52",
    "arquivado": false,
    "dataPagamento": null,
    "numeroLancamento": 0,
    "codigo": "1212",
    "nome": "Edificio 0002",
    "usuarioViu": null,
    "flagVisualizado": null,
    "vencido": true
  }
]

In simplifying I would like to change the first object [0] .userViu = true

I'm working with React-native, Redux-saga

javascript react-native redux

asked by anonymous 24.03.2018 / 22:55

1 answer

How to hide all buttons with foreach? Is it possible to call a method inside another instance?

score 1 · Accepted Answer

You have to use TouchableHighlight for the items to respond properly to the taps

Define a method to update the value of the property.

handleUsuarioViu = (index) => {
  let dados = this.state.dados;
  alert(dados[index].usuarioViu); // Apenas para demonstrar
  dados[index].usuarioViu = true;
  this.setState({ dados: dados });
};

The alert is only to demonstrate the operation, with each touch / click, will display the current value. Then the value of the usuarioViu property of the item that received the touch / click is updated.

In property renderItem of FlatList change to:

<TouchableHighlight onPress={() => this.handleUsuarioViu(index)}>
  <Text>{item.nome}</Text>
</TouchableHighlight>

You can see it working at snack.expo.io