I have a screen that navigates to another screen. Both uses same stateful component that should set a state for whichever screen it was called. But in my case, I am navigating to the second screen and then uses the stateful component there.
The problem is, when I set a state for the second screen using useEffect, the first screen is being affected too.
firstScreen = () => {
const [pictures, setPictures] = useState([])
return(
<>
<Component
pictures = {pictures}
setPictures = {setPictures}
/>
<button onPress = {Navigation.navigate(secondScreen)}/>
</>
)
}
secondScreen = () => {
const [pictures, setPictures] = useState([])
return(
<Component
pictures = {pictures}
setPictures = {setPictures}
/>
)
}
Component = ({pictures, setPictures}) => {
useEffect(()=>{
setPictures(some data from api) // this sets both pictures for firstScreen and secondScreen, I only want to set the pictures on the secondScreen
},[])
return (
...
)
}