How do I update state inside function in react native? - react-native

Question

I have a simple functional component, where depending on the state I show "add item" or "remove item" button:
const SimpleComponent = ({ route }) => {
const { id } = route.params;
const [add, setAdd] = useState(false);
useEffect(() => {
{ isCurrentUserHavingThisItem(route, id) ?
setAdd(true)
:
setAdd(false)
}
}, [])
return (
<View >
{ add ?
(
<TouchableOpacity onPress={() => removeItem(route, id)}>
<Text> Remove this item </Text>
</TouchableOpacity>
)
:(
<TouchableOpacity onPress={() => addItem(route, id)}>
<Text> Add item </Text>
</TouchableOpacity>
)
}
</View>
);
};
const isCurrentUserHavingThisItem = (route, id) => {
firebase.firestore()
.collection('Users')
.doc(id)
.collection('Items')
.doc(route.params.item.key)
.get()
.then((docSnapshot) => {
console.log("my return statement: ", docSnapshot.exists);
setAttending(docSnapshot.exists);
return docSnapshot.exists;
})
.catch((error) => {
console.log(error);
return false;
});
}
I think that isCurrentUserHavingThisItem is working fine. However, when I press the "Add item" I trigger the following function:
const addItem = (route, id) => {
firebase.firestore()
.collection('Users')
.doc(id)
.collection('Items')
.doc(route.params.item.key)
.set({})
.then(setAdd(true));
}
Which gives me the following error: ReferenceError: Can't find variable: setAdd I also tried the following:
const addItem = (route, id) => {
firebase.firestore()
.collection('Users')
.doc(id)
.collection('Items')
.doc(route.params.item.key)
.set({});
setAdd(true);
}
but it gave me the same error. Here is the whole component structure for better visibility:
const SimpleComponent = ({ route }) => {
const { id } = route.params;
const [add, setAdd] = useState(false);
useEffect(() => {
{ isCurrentUserHavingThisItem(route, id) ?
setAdd(false)
:
setAdd(true)
}
}, [])
return (
<View>
{ add ?
(
<TouchableOpacity onPress={() => removeItem(route, id)}>
<Text style={styles.title}>Remove item</Text>
</TouchableOpacity>
)
:(
<TouchableOpacity onPress={() => addItem(route, id)}>
<Text style={styles.title}>Add item</Text>
</TouchableOpacity>
)
}
</View>
);
};
const isCurrentUserHavingThisItem = (route, id) => {
//same as I described it above; I think it works fine
}
const addItem = (route, id) => {
//same as described above
//gives me error when I try to update the state
}
const leaveMeetup = (route, id) => {
//same as described above
//gives me error when I try to update the state
}
export default SimpleComponent;
Basically, after I add the item successfully, I want to display "remove item" button and vice versa. In order to do so I try to update the state but as I said I have ReferenceError: Can't find variable: setAdd error and I dont see why. Can someone help?

Answer 1

Your setAdd method is outside the component that's why it is showing that error...Please move your methods inside your functional component like this.
const SimpleComponent = ({ route }) => {
const { id } = route.params;
const [add, setAdd] = useState(false);
const isCurrentUserHavingThisItem = (route, id) => {}
const addItem = (route, id) => {}
const leaveMeetup = (route, id) => {}
useEffect(() => {
{ isCurrentUserHavingThisItem(route, id) ?
setAdd(false)
:
setAdd(true)
}
}, [])
return (
<View>
{ add ?
(
<TouchableOpacity onPress={() => removeItem(route, id)}>
<Text style={styles.title}>Remove item</Text>
</TouchableOpacity>
)
:(
<TouchableOpacity onPress={() => addItem(route, id)}>
<Text style={styles.title}>Add item</Text>
</TouchableOpacity>
)
}
</View>
);
};
export default SimpleComponent;
and i think you can't do it like this.
.then(setAdd(true));
You get a callback in .then()
So the correct way to do this is
.then(()=>{
setAdd(true)
}).