✅useContext ✅ to Update State in List from Detail View (React Native)
Tags: reactnative, tutorial, javascript
Published: 2019-10-08 14:54:32

FOLLOW ME: [YouTube](https://www.youtube.com/c/michaellustig?sub_confirmation=1 )   |   [dev.to](https://dev.to/technoplato)   |   [Twitter](https://twitter.com/technoplato/)   |   [Github](https://github.com/technoplato)   |    [Medium](https://medium.com/@michaellustig)   |   [Reddit](https://www.reddit.com/user/halfjew22)

# Video
[✅useContext ✅Use React Context to Update State in List from Detail View (React Native)](https://www.youtube.com/watch?v=UgHL_F3tW5g)

{% twitter 1181583702855491586 %}

{% youtube UgHL_F3tW5g %}

# Brief Intro
[I came across a post this morning on Reddit](https://www.reddit.com/r/reactnative/comments/derijn/help_regarding_updating_states/) asking about how to update state in their list from their details page. I thought this would be a good video to make, explaining how to do this in a couple of different ways. I ended up only making the video demonstrating how to use React Context to do this, which is slightly more complex code, but I feel cleaner ultimately. 

Run the code in your browser: [Context](https://snack.expo.io/@technoplato/toggle-state-in-list-from-detail-view-%28using-context%29) | [Callbacks](https://snack.expo.io/@technoplato/toggle-state-in-list-from-detail-view-using-callbacks)

[Snack (run and tinker with code IN YOUR BROWSER 🤯]([https://snack.expo.io/@technoplato/toggle-state-in-list-from-detail-view-(using-context)](https://snack.expo.io/@technoplato/toggle-state-in-list-from-detail-view-(using-context)))  |     |   Reddit Post

# SHUTUP, WHERES THE CODE
```jsx
import React, {  
  useState,  
  createContext,  
  useContext,  
  useRef,  
  useMemo,  
} from 'react';  
import {  
  StyleSheet,  
  View,  
  Text,  
  SafeAreaView,  
  TouchableOpacity,  
  FlatList,  
} from 'react-native';  
  
import { createAppContainer } from 'react-navigation';  
import { createStackNavigator } from 'react-navigation-stack';  
  
const DATA = {  
  'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba': {  
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',  
    title: 'First Item',  
    selected: false,  
  },  
  '3ac68afc-c605-48d3-a4f8-fbd91aa97f63': {  
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',  
    title: 'Second Item',  
    selected: false,  
  },  
  '58694a0f-3da1-471f-bd96-145571e29d72': {  
    id: '58694a0f-3da1-471f-bd96-145571e29d72',  
    title: 'Third Item',  
    selected: false,  
  },  
};  
  
const DataContext = createContext({  
  data: [],  
  selectItem: () => {},  
});  
  
const DataContextProvider = props => {  
  const selectItem = id => {  
    const item = state.data[id];  
    item.selected = !item.selected; 
      ...state,  
      data: {  
        ...state.data,  
        [item.id]: item,  
      },  
    });  
  };  
  
  const initialState = {  
    data: DATA,  
    selectItem: selectItem,  
  };  
  
  const [state, setState] = useState(initialState);  
  
  return (  
    <DataContext.Provider value={state}>{props.children}</DataContext.Provider>  
  );  
};  

const Main = ({ navigation }) => {  
  const { data } = useContext(DataContext);  
  
  return (  
    <SafeAreaView style={styles.container}>  
      <FlatList  
        data={Object.values(data)}  
        renderItem={({ item }) => (  
          <Item  
            item={item}  
            handleShowDetails={id => {  
              navigation.navigate('Details', {  
                id,  
              });  
            }}  
          />  
        )}  
       keyExtractor={item => item.id}  
      />  
    </SafeAreaView>  
  );  
};  
  
function Item({ item, handleShowDetails }) {  
  const { id, title, selected } = item;  
  const { selectItem } = useContext(DataContext);  
  return useMemo(() => {  
    return (  
      <TouchableOpacity  
        onPress={() => {  
          selectItem(id);  
        }}  
        style={[  
          styles.item,  
          { backgroundColor: selected ? '#6e3b6e' : '#f9c2ff' },  
        ]}>  
        <View  
          style={{  
            flexDirection: 'row',  
            justifyContent: 'space-between',  
            padding: 18,  
          }}>  
          <Text style={styles.title}>{title}</Text>  
          <Text onPress={() => handleShowDetails(id)}>Details</Text>  
        </View>  
      </TouchableOpacity>  
    );  
  }, [selected, title]);  
}  
  
const Details = ({ navigation }) => {  
  const id = navigation.state.params.id;  
  const { data, selectItem } = useContext(DataContext);  
  const item = data[id];  
  
  return (  
    <View  
	  style={[  
        styles.centered,  
        { backgroundColor: item.selected ? '#6e3b6e' : '#f9c2ff' },  
      ]}>  
      <Text style={styles.title}>{`Details for Item: ${item.title}`}</Text>  
      <Text  
         onPress={() => {  
          selectItem(item.id);  
        }}>{`Is selected: ${item.selected}\n\n(click me to toggle selected)`}</Text>  
    </View>  
  );  
};  
  
const StackNavigation = createStackNavigator({  
  Main: Main,  
  Details: Details,  
});  
  
const Container = createAppContainer(StackNavigation);  
  
const App = () => (  
  <DataContextProvider>  
    <Container />  
  </DataContextProvider>  
);  
  
export default App;  
  
const styles = StyleSheet.create({  
  centered: {  
    flex: 1,  
    justifyContent: 'center',  
    alignItems: 'center',  
    padding: 16,  
  },  
  title: {  
    fontSize: 32,  
    fontWeight: '400',  
  },  
  container: {  
    flex: 1,  
    marginTop: 24,  
  },  
  item: {  
    backgroundColor: '#f9c2ff',  
    padding: 20,  
    marginVertical: 8,  
    marginHorizontal: 16,  
  },  
});
```



# 🤟🙏 THANKS FOR READING 🤟🙏
If you liked the post, please be sure to give it a thumbs up, a heart, an upvote, a retweet, or whatever it is that the cool kids do these days. All my follow links are below if you're intersted in quick tutorials and explanations like this one. 

## 🤔 QUESTIONS | 📝 COMMENTS | 📉 CONCERNS | 📩 SUGGESTIONS 
Let me know if you have any questions in the comments or if I could have done a better job explaining anything anywhere.

Most importantly, 
💻📲👨🏻‍💻KEEP CODING, KEEP LEARNING, AND KEEP DOING!

## 👇👇👇 FOLLOW ME 👇👇👇

[YouTube](https://www.youtube.com/c/michaellustig?sub_confirmation=1 )   |   [dev.to](https://dev.to/technoplato)   |   [Twitter](https://twitter.com/technoplato/)   |   [Github](https://github.com/technoplato)   |    [Medium](https://medium.com/@michaellustig)   |   [Reddit](https://www.reddit.com/user/halfjew22)