Why am i getting error: Too many rerenders in react native - react-native

Question

I am trying to pass an array to another component. Data is a json object array with data in it. I know the data is there because when i click the button, the handleclick method is called and the data is displayed but when i try to pass that data as an array (seasondisplay and seasonlength) I get an error: Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. How do i pass the data from the fetch as an array to the dropdown box component?
function HomeScreen({ navigation }) {
const [list, setList] = useState([]);
const [isLoading, setLoading] = useState(true);
const [data, setData] = useState([]);
let seasons = [];
useEffect(() => {
fetch('http://localhost:3000/person', {
credentials: "same-origin"
})
.then((response) => response.json())
.then((json) => setData(json))
.catch((error) => console.log("junk" + error))
.finally(() => setLoading(false));
}, []);
const [display, setDisplay] = useState("");
const handleClick = () => {
setDisplay(
data.map((item, i) => (
<Text key={i}> {item.lastname} </Text>
)))
}
const [seasondisplay, setSeasonDisplay] = useState("");
const [seasonlength, setSeasonLengthDisplay] = useState(0);
setSeasonDisplay(
data["lastname"]
)
setSeasonLengthDisplay (
2
)
return (
<View style={styles.container}>
<View style={styles.innerContainer}>
<DropDownChoice whichDropDown="Season" HowMany={seasonlength} ItemChoices={seasondisplay} />
<DropDownChoice whichDropDown="Veggies" HowMany={4} ItemChoices={["carrots", "turnip", "peas", "corn"]} />
<DropDownChoice whichDropDown="Fruit" HowMany={3} ItemChoices={["apples", "oranges", "bananas"]} />
<Button
title="Connect to DB"
onPress={() => {
console.log("please work");
console.log(data);
handleClick();
}}
here is json:
[{"personid":11,"lastname":"cook","firstname":"ben","address":"north","city":"london"},{"personid":22,"lastname":"smith","firstname":"elaine","address":"main","city":"milton"}]

Answer 1

I suspect that:
You are changing state on each render by setSeasonDisplay. This state change cause re render and again in rendering you changing state. You have a loop.
function HomeScreen({ navigation }) {
const [list, setList] = useState([]);
const [isLoading, setLoading] = useState(true);
const [data, setData] = useState([]);
let seasons = [];
useEffect(() => {
fetch('http://localhost:3000/person', {
credentials: "same-origin"
})
.then((response) => response.json())
.then((json) => setData(json))
.catch((error) => console.log("junk" + error))
.finally(() => setLoading(false));
}, []);
const [display, setDisplay] = useState("");
const handleClick = () => {
setDisplay(
data.map((item, i) => (
<Text key={i}> {item.lastname} </Text>
)))
}
const [seasondisplay, setSeasonDisplay] = useState("");
const [seasonlength, setSeasonLengthDisplay] = useState(0);
//---------- changes
useEffect(() => {
setSeasonDisplay(data["lastname"])
setSeasonLengthDisplay (2)
}, [data])
//----------------
return (
<View style={styles.container}>
<View style={styles.innerContainer}>
<DropDownChoice whichDropDown="Season" HowMany={seasonlength} ItemChoices={seasondisplay} />
<DropDownChoice whichDropDown="Veggies" HowMany={4} ItemChoices={["carrots", "turnip", "peas", "corn"]} />
<DropDownChoice whichDropDown="Fruit" HowMany={3} ItemChoices={["apples", "oranges", "bananas"]} />
<Button
title="Connect to DB"
onPress={() => {
console.log("please work");
console.log(data);
handleClick();
}}