I'm trying to update a Context like a Counter in button click inside Consumer, it's work a first time (increment +1) but after click first time the button doesn't seem to be able to click again.
UserContext.js
import React from 'react'; import { createContext, useState } from "react";
export const UserContext = createContext();
const UserProvider = ({children}) => {
const [context, setContext] = useState({count : 1, update: () => {
setContext((context) => ({
count: context.count + 1
}));
}});
return(
<UserContext.Provider value={context}>
{children}
</UserContext.Provider>
);
}
export default UserProvider;
index.js
import React, {useEffect, useState, useContext } from 'react';
import {ScrollView, Text, View , Button, StyleSheet, ActivityIndicator} from 'react-native';
import {Colors} from 'react-native/Libraries/NewAppScreen';
import { UserContext } from '../userContext.js';
export default Home = ({navigation}) => {
return (
<View style={styles.body}>
<UserContext.Consumer>
{({count, update}) => (
<View>
<Button
onPress={update}
title="Counter">
</Button>
<Text>{count}</Text>
</View>
)}
</UserContext.Consumer>
</View>
);
};
How to define and use context
const UserProvider = ({children}) => {
const [context, setContext] = useState(1)
//create a update function that setContext
const update = () => {
setContext(prev => prev+1);
}
return(
<UserContext.Provider value={{ context, update }}>
{children}
</UserContext.Provider>
);
}
in your index.js
export default Home = ({navigation}) => {
return (
{ /* wrap your app in the provider */}
<UserProvider>
<App />
</UserProvider>
);
};
//App Component
const App = () => {
const { context, update } = useContext(UserContext)
return (<View>
<Button onPress={update} title="Counter">Add Counter</Button>
<Text>{context}</Text>
</View>)
}