react native - storing data with asyncstorage using yup

Question

iam a begginer at react-native apps also programing i'am trying to make my first note app but i'am having this error: [AsyncStorage] Using object type for key is not supported. This can lead to unexpected behavior/errors. Use string instead. Key passed: [object Object]. this is in my cache component

import AsyncStorage from "@react-native-async-storage/async-storage";
import { v4 as uuidv4 } from "uuid";

const store = async (id, value) => {
  try {
    const item = {
      value,
      id: uuidv4(),
      timestamp: Date.now(),
    };
    await AsyncStorage.setItem(id, JSON.stringify(value));
    alert(success);
  } catch (error) {
    console.log(error);
  }
};

and this is my listingEdit:

import React from "react";
import { StyleSheet } from "react-native";
import * as Yup from "yup";

import AppForm from "../forms/AppForm";
import AppFormField from "../forms/AppFormField";
import SubmitButton from "../forms/SubmitButton";
import Cache from "../utility/Cache";
import Screen from "../Screen";

const validationSchema = Yup.object().shape({
  title: Yup.string().label("Title"),
  description: Yup.string().label("Note"),
});

function ListingEditScreen() {
  const handleSubmit = async () => {
    await Cache.store();
  };
  return (
    <Screen style={styles.container}>
      <AppForm
        initialValues={{
          title: "",
          description: "",
        }}
        onSubmit={handleSubmit}
        validationSchema={validationSchema}
      >
        <AppFormField maxLength={255} name="title" placeholder="Title" />
        <AppFormField
          maxLength={255}
          multiline
          name="description"
          numberOfLines={3}
          placeholder="Note ...."
        />
        <SubmitButton title="Save" />
      </AppForm>
    </Screen>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 10,
  },
});
export default ListingEditScreen;

and this is my listingNote:

import React from "react";
import { FlatList, StyleSheet } from "react-native";

import colors from "../config/colors";
import Card from "../Card";
import Screen from "../Screen";
import AddButton from "../forms/AddButton";
import Cache from "../utility/Cache";

const listings =  () => {
  Cache.get();
};
function ListingsNotes({ numColumns = 2, navigation }) {
  return (
    <Screen style={styles.screen}>
      <FlatList
        numColumns={numColumns}
        style={styles.flat}
        data={listings}
        keyExtractor={(listings) => listings.id.toString()}
        renderItem={({ item }) => (
          <Card title={item.title} description={item.description} />
        )}
      />
      <AddButton
        title="add note"
        onPress={() => navigation.navigate("Add Note")}
      />
    </Screen>
  );
}
const styles = StyleSheet.create({
  screen: {
    padding: 5,
    backgroundColor: colors.white,
    alignItems: "center",
    justifyContent: "center",
  },
});
export default ListingsNotes;

by the way i cant have books about coding so what kind of courses will propose for me so i can make a real worl app

thanks.

question from:https://stackoverflow.com/questions/65943248/storing-data-with-asyncstorage-using-yup

Answer 1

Waitting for answers