As far as I understand the problem, you want to store the data in this format
[
{ date: 'h', value: 'h', name: 'h' },
{ date: 'h', value: 'h', name: 'h' },
{ date: 'h', value: 'h', name: 'h' },
{ date: 'h', value: 'h', name: 'h' },
]
I would suggest you to create a helper file for all Storage operations
Step 1:
Create a folder called storage where your App.js is located. Now inside storage folder, create a file called AsyncStore.js which should look like this
AsyncStore.js
import AsyncStorage from '@react-native-async-storage/async-storage';
const setData = async (token, value) => {
try {
await AsyncStorage.setItem(token, JSON.stringify(value));
return true;
} catch (e) {
return false;
}
};
const getData = async (token) => {
try {
const jsonValue = await AsyncStorage.getItem(token);
return jsonValue != null ? JSON.parse(jsonValue) : null;
} catch (e) {
return null;
}
};
const removeData = async (token) => {
try {
await AsyncStorage.removeItem(token);
} catch (e) {
return null;
}
};
export default { setData, getData, removeData };
Step 2:
Change your storing function createDay to this
async function createDay(date, journal, name) {
try {
const response = await Storage.getData('@journal'); // Get last data stored
let tempData = []; // Make a new array
if (response) tempData = [...response]; // Copy elements if array is not null
tempData.push({ date: 'h', value: 'h', name: 'h' }); // Push New element to array
await Storage.setData('@journal', tempData); // Set new Array in local Storage
} catch (err) {
console.error(err); // Some error while storing data
}
}
Result
I've made an example Snack here for you to see the working implementation. If you want to check if data is getting stored perfectly, you can check as shown below
import * as React from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import AsyncStore from './storage/AsyncStore';
export default function App() {
const [JournalData, SetJournalData] = React.useState([]);
React.useEffect(() => {
RestoreData(); // Restoring the last data stored here
}, []);
const RestoreData = async () => {
try {
const response = await AsyncStore.getData('@journal');
if (response) {
console.log(response);
SetJournalData(response);
}
} catch (e) {
console.log(e);
}
};
async function createDay(date, journal, name) {
try {
const response = await AsyncStore.getData('@journal'); // Get last data stored
let tempData = []; // Make a new array
if (response) tempData = [...response]; // Copy elements if array is not null
tempData.push({ date: 'h', value: 'h', name: 'h' }); // Push New element to array
SetJournalData(tempData);
await AsyncStore.setData('@journal', tempData); // Set new Array in local Storage
} catch (err) {
console.error(err); // Some error while storing data
}
}
return (
<View style={styles.container}>
<Button title="Add Some Data" onPress={createDay} />
<Text>{`Listing total ${JournalData.length} items`}</Text>
{JournalData.map((item, index) => (
<Text
key={
index
}>{`item Number = ${index} date = ${item.date} value = ${item.value} name = ${item.name}`}</Text>
))}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#ecf0f1',
padding: 8,
},
});