Boa noite. Estou aprendendo os hooks e gostaria de ajuda para resolver o problema de atualização do valor do useState a partir de um array. Tenho o código a seguir:
import React, { useState } from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
const Jantar = () => {
const opcoes = ['Hamburger', 'Chachorro-quente', 'Lasanha', 'Strogonoff'];
const [comidas, setComidas] = useState(opcoes[0]);
const onPress = () => {
setComidas(comidas => comidas + 1);
}
return (
<>
<Text style={styles.text}>Hoje você vai jantar: {comidas} </Text>
<TouchableOpacity style={styles.botao}>
<Text style={styles.text} onPress={onPress} >Escolher comida</Text>
</TouchableOpacity>
</>
);
}
export default function App() {
return (
<View style={styles.container}>
<Jantar />
</View>
);
}
Tenho um array com comidas e um campo de texto que diz qual comida a pessoa vai jantar. Cada clique no botão deve atualizar o campo de texto com o próximo item do array de comidas. Não estou conseguindo fazer o campo de texto atualizar com a função onPress. Pela minha análise, preciso vincular, de alguma forma, a variável "comida" - que inicializa com o primeiro item do array de comidas - com o array "opcoes". Não sei como fazer.