title: Saving data into async storage onPress in react native
body: <p>Am trying to save data into async storage every time a user clicks on a certain button and then have the saved data displayed on a seprate screen that i can navigate to, i found an example doing the same thing but using class components , i started learning react native using functional components only so i have no idea to transition from the class component to the functional component in this case</p>
  <p>The code used :  ( the screen doing the saving )</p>
  <pre><code>import React from &quot;react&quot;;
  import { StyleSheet, Text, View, Dimensions, Image } from &quot;react-native&quot;;
  import { SharedElement } from &quot;react-native-shared-element&quot;;
  import { TouchableOpacity, ScrollView } from &quot;react-native-gesture-handler&quot;;
  import MaterialCommunityIcons from &quot;react-native-vector-icons/MaterialCommunityIcons&quot;;
  import { Entypo } from &quot;@expo/vector-icons&quot;;
  import { FontAwesome } from &quot;@expo/vector-icons&quot;;
  import colors from &quot;../config/colors&quot;;
  import { SaveItem, ReadItem } from &quot;../components/DbHelper&quot;;
  const DetailScreen = (props) =&gt; {
    state = {       ####### getting an error on state 
      items: props.route.params,
      saved: [],
    };
    onSave = (item) =&gt; {
      const { saved } = this.state;
      const newItems = [...saved, item];
  
      this.setState({
        saved: newItems,
      });
  
      const items = JSON.stringify(newItems);
  
      SaveItem(&quot;saved&quot;, items)
        .then((res) =&gt; {
          console.warn(&quot;saved&quot;, res);
        })
        .catch((e) =&gt; console.warn(e));
    };
    goToDetails = () =&gt; {
      this.setState({
        saved: [],
      });
  
      this.props.navigation.navigate(&quot;SaveScreen&quot;);
    };
    const { width, height } = Dimensions.get(&quot;window&quot;);
    const { data } = props.route.params;
  
    return (
      &lt;View style={styles.container}&gt;
        &lt;View&gt;
          &lt;SharedElement id={`item.${data.id}.photo`}&gt;
            &lt;Image
              resizeMode=&quot;cover&quot;
              source={{ uri: data.img }}
              style={{
                width: 400,
                height: 300,
                borderBottomLeftRadius: 50,
                //borderBottomRightRadius: 50,
              }}
            /&gt;
          &lt;/SharedElement&gt;
          &lt;View
            style={{
              flexDirection: &quot;row&quot;,
              alignItems: &quot;center&quot;,
              position: &quot;absolute&quot;,
              bottom: 14,
              left: 10,
            }}
          &gt;
            &lt;SharedElement id={`item.${data.id}.profilePic`}&gt;
              &lt;Image
                resizeMode=&quot;cover&quot;
                source={{ uri: data.image }}
                style={{
                  width: 60,
                  height: 60,
                  borderRadius: 10,
                  marginRight: 14,
                }}
              /&gt;
            &lt;/SharedElement&gt;
            &lt;View
              style={{
                flex: 1,
                flexDirection: &quot;row&quot;,
                alignItems: &quot;center&quot;,
                justifyContent: &quot;space-between&quot;,
              }}
            &gt;
              &lt;SharedElement id={`item.${data.id}.profilePic`}&gt;
                &lt;Image
                  resizeMode=&quot;cover&quot;
                  source={{
                    uri:
                      &quot;https://fertility.womenandinfants.org/app/uploads/photo-huff-post-logo.png&quot;,
                  }}
                  style={styles.blogProfilePic}
                /&gt;
              &lt;/SharedElement&gt;
              &lt;View&gt;
                &lt;SharedElement id={`item.${data.id}.username`}&gt;
                  &lt;Text
                    style={{ color: &quot;white&quot;, fontSize: 16, fontWeight: &quot;bold&quot; }}
                  &gt;
                    {data.username}
                  &lt;/Text&gt;
                &lt;/SharedElement&gt;
                &lt;View
                  style={{
                    flexDirection: &quot;row&quot;,
                    alignItems: &quot;center&quot;,
                  }}
                &gt;
                  &lt;SharedElement id={`item.${data.id}.username`}&gt;
                    {data.author != null ? (
                      &lt;Text style={styles.blogUsername}&gt;{data.author}&lt;/Text&gt;
                    ) : (
                      &lt;Text style={styles.blogUsername}&gt;Anonymous author&lt;/Text&gt;
                    )}
                  &lt;/SharedElement&gt;
  
                  &lt;SharedElement id={`item.${data.id}.readtime`}&gt;
                    &lt;View style={{ bottom: 5 }}&gt;
                      &lt;Entypo
                        name=&quot;time-slot&quot;
                        size={20}
                        color={colors.shade2}
                        style={{ top: 84, right: 210 }}
                      /&gt;
                      &lt;Text style={styles.readtime}&gt;
                        {data.content.length / 10}min
                      &lt;/Text&gt;
                    &lt;/View&gt;
                  &lt;/SharedElement&gt;
                &lt;/View&gt;
              &lt;/View&gt;
  
              &lt;View style={{ right: 20 }}&gt;
                &lt;TouchableOpacity
                  onPress={() =&gt; {
                    this.onSave(item);
                  }}
                &gt;
                  &lt;MaterialCommunityIcons
                    name=&quot;bookmark&quot;
                    size={35}
                    color={colors.shade2}
                  /&gt;
                &lt;/TouchableOpacity&gt;
                &lt;TouchableOpacity
                  onPress={this.goToDetails}
                  style={styles.button}
                &gt;
                  &lt;Text style={styles.save}&gt;View Saved&lt;/Text&gt;
                &lt;/TouchableOpacity&gt;
              &lt;/View&gt;
            &lt;/View&gt;
          &lt;/View&gt;
          &lt;SharedElement id={`item.${data.id}.readtime`}&gt;
            &lt;Text
              style={{
                color: &quot;white&quot;,
                fontSize: 14,
                borderColor: &quot;red&quot;,
                borderRadius: 10,
                top: 45,
                left: 280,
              }}
            &gt;
              {data.category}
            &lt;/Text&gt;
          &lt;/SharedElement&gt;
        &lt;/View&gt;
        &lt;ScrollView style={{ paddingHorizontal: 10, paddingTop: 14 }}&gt;
          &lt;SharedElement
            id={`item.${data.id}.text`}
            style={{ width: width - 30, marginBottom: 14 }}
          &gt;
            &lt;Text
              style={{
                fontSize: 26,
                fontWeight: &quot;bold&quot;,
                lineHeight: 32,
                color: &quot;#FFFFFF&quot;,
                top: 50,
              }}
            &gt;
              {data.title}
            &lt;/Text&gt;
          &lt;/SharedElement&gt;
          &lt;Text
            style={{
              fontSize: 16,
              lineHeight: 28,
              textAlign: &quot;justify&quot;,
              opacity: 0.5,
              color: &quot;#CDCFDE&quot;,
              top: 50,
            }}
          &gt;
            {data.content}
          &lt;/Text&gt;
  
          &lt;View
            style={{
              marginVertical: 25,
              paddingBottom: 20,
              flex: 1,
              flexDirection: &quot;row&quot;,
              justifyContent: &quot;space-between&quot;,
              alignItems: &quot;center&quot;,
            }}
          &gt;
            &lt;TouchableOpacity
              style={{ flexDirection: &quot;row&quot;, padding: 12, alignItems: &quot;center&quot; }}
            &gt;
              {/*      &lt;Feather name=&quot;heart&quot; size={16} color=&quot;orange&quot; /&gt;
              &lt;Text style={{ marginHorizontal: 10 }}&gt;3.4k Likes&lt;/Text&gt;*/}
            &lt;/TouchableOpacity&gt;
          &lt;/View&gt;
        &lt;/ScrollView&gt;
        &lt;View style={{ position: &quot;absolute&quot;, top: 40, left: 10 }}&gt;
          &lt;TouchableOpacity onPress={() =&gt; props.navigation.goBack()}&gt;
            &lt;FontAwesome name=&quot;arrow-circle-left&quot; size={30} color=&quot;white&quot; /&gt;
          &lt;/TouchableOpacity&gt;
        &lt;/View&gt;
      &lt;/View&gt;
    );
  };
  
  });
  export default DetailScreen;
  </code></pre>
  <p>The code for storing the data :</p>
  <pre><code>import { AsyncStorage } from &quot;react-native&quot;;
  
  export const SaveItem = async (key, value) =&gt; {
    try {
      await AsyncStorage.setItem(key, value);
      console.log(&quot;saved&quot;);
    } catch (e) {
      console.log(e);
    }
  };
  
  export const ReadItem = async (key) =&gt; {
    try {
      var result = await AsyncStorage.getItem(key);
      return result;
    } catch (e) {
      return e;
    }
  };
  
  export function MultiRead(key, onResponse, onFailure) {
    try {
      AsyncStorage.multiGet(key).then((values) =&gt; {
        let responseMap = new Map();
        values.map((result, i, data) =&gt; {
          let key = data[i][0];
          let value = data[i][1];
          responseMap.set(key, value);
        });
        onResponse(responseMap);
      });
    } catch (error) {
      onFailure(error);
    }
  }
  
  export async function DeleteItem(key) {
    try {
      await AsyncStorage.removeItem(key);
      return true;
    } catch (exception) {
      return false;
    }
  }
  
  </code></pre>
  <p>Sorry for the long code i tried to include all the parts to have a better grasp of the problem.</p>