Search code examples
reactjsreact-nativereact-hooksjsxreact-context

React Native - Update Context in Consumer only works first time


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>

  );
};

Solution

  • 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>)
    }