How do I increment i in useState? - react-native

Question

I have been struggling for hours and couldn't figuring out how to increment i using useState([]). I know useState([]) is an asynchronous function, and I don't know how to increment i properly to give unique keys to each Text
Here is my code -
import React, { Component, useState, useEffect } from "react";
import {
View,
Text,
StyleSheet,
TextInput
} from 'react-native';
let weatherPanel = []
function WeatherApp(){
const [data, setData] = useState([]);
let i = 0;
const dates = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const temperatures = [20, 21, 26, 19, 30, 32, 23, 22, 24];
const cities = ['LA', 'SAN', 'SFO', 'LGA', 'HND', 'KIX', 'DEN', 'MUC', 'BOM'];
const buttonPressed = () => {
weatherPanel.push(
<View style = {styles.weatherBoard}>
<Text key = {dates[i]} style = {styles.date}>{dates[i]}</Text>
<Text key = {temperatures[i]} style = {styles.temperature}>{temperatures[i]}</Text>
<Text key = {cities[i]} style = {styles.cityName}>{cities[i]}</Text>
</View>
)
setData(weatherPanel);
i = i + 1;
}
// learn this to increment i properly
useEffect(()=>{
console.log(i)
}, [])
return(
<View style={styles.appBackground}>
<View style = {styles.searchBar}>
<TextInput>Text</TextInput>
</View>
<View style = {styles.weatherPanel}>
{data}
</View>
<View style = {styles.addButton}>
<Text onPress={() => buttonPressed(i)} style = {styles.temperature}>Text</Text> // CALLED buttonPressed() HERE.
</View>
</View>
)
}
I am calling button buttonPressed at the comment, //CALLED buttonPressed() HERE.. I am trying to add i, that is mentioned above, to access elements of all equal length lists. Could someone help me?
Thanks!

Answer 1

The effect runs once on load and then when any of the values in the dependency array change. Your useEffect has an empty dependency array, so it will never fire after load. If you want to run the effect when i changes, it should be
useEffect(()=>{
console.log(i)
}, [i]);
Read more about useEffect here in the docs.
If you have control over the data you're using, it's more intuitive to store all the related info in one object, rather than in three separate arrays linked only by index.
const weatherArray = [
{ date: 1, temperature: 20, city: 'LA' },
// ...
You should also store i in state rather than as a plain variable. Keeping it in state will tell React to re-render the component when it changes.
const [i, setI] = useState(0);
// ...
setI(oldI => oldI + 1);

Answer 2

In your case, you would like to display data in loops for some data set. I would suggest you to solve it without iterator and use map() function instead.
import React, { Component, useState, useEffect } from "react";
import {
View,
Text,
StyleSheet,
TextInput
} from 'react-native';
function WeatherApp(){
const [data, setData] = useState([]);
const dates = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const temperatures = [20, 21, 26, 19, 30, 32, 23, 22, 24];
const cities = ['LA', 'SAN', 'SFO', 'LGA', 'HND', 'KIX', 'DEN', 'MUC', 'BOM'];
const buttonPressed = () => {
if (data.length >= dates.length) return; //Prevent out of bound
setData([
...data, //get old data array
{
//New data set
dates: dates[data.length],
temperatures: temperatures[data.length],
cities: cities[data.length]
}
]);
}
return (
<View style={styles.appBackground}>
<View style={styles.searchBar}>
<TextInput>Text</TextInput>
</View>
<View style={styles.weatherPanel}>
{
//Loop the data by map function
data.map((item, index) => {
return (
<View style={styles.weatherBoard}>
<Text key={item.dates} style={styles.date}>{item.dates}</Text>
<Text key={item.temperatures} style={styles.temperature}>{item.temperatures}</Text>
<Text key={item.cities} style={styles.cityName}>{item.cities}</Text>
</View>
)
})
}
</View>
<View style={styles.addButton}>
<Text onPress={() => buttonPressed()} style={styles.temperature}>Add Item</Text>
</View>
</View>
)
}