react native asyncstorage how to save and add object - reactjs

Question

I found this piece of code in one of the tutorials, as I understand it, when entering text inside the input, the text is saved in asyncstorage, but how to make that when the button is pressed, an object is formed and added to the state like this {id: 1, name: 'Alex'} how can I reolize it?
import React, { Component } from 'react'
import { StatusBar } from 'react-native'
import { AsyncStorage, Text, View, TextInput, StyleSheet } from 'react-native'
class AsyncStorageExample extends Component {
state = {
'name': ''
}
componentDidMount = () => AsyncStorage.getItem('name').then((value) => this.setState({ 'name': value }))
setName = (value) => {
AsyncStorage.setItem('name', value);
this.setState({ 'name': value });
}
render() {
return (
<View style = {styles.container}>
<TextInput style = {styles.textInput} autoCapitalize = 'none'
onChangeText = {this.setName}/>
<Text>
{this.state.name}
</Text>
</View>
)
}
}
export default AsyncStorageExample
const styles = StyleSheet.create ({
container: {
flex: 1,
alignItems: 'center',
marginTop: 50
},
textInput: {
margin: 5,
height: 100,
borderWidth: 1,
backgroundColor: '#7685ed'
}
})

Answer 1

You can check following code it will help to solve your problem.
import React, { Component } from "react";
import { StatusBar } from "react-native";
import {
AsyncStorage,
TouchableOpacity,
Text,
View,
TextInput,
StyleSheet,
} from "react-native";
class AsyncStorageExample extends Component {
state = {
name: "",
savedData: "",
};
componentDidMount = () =>
AsyncStorage.getItem("name").then((value) =>
this.setState({ savedData: value })
);
setData = (value) => {
AsyncStorage.setItem("name", JSON.stringify([{ id: 1, name: value }]));
};
getData = (value) => {
AsyncStorage.getItem("name").then((value) =>
this.setState({ savedData: value })
);
};
render() {
return (
<View style={styles.container}>
<TextInput
style={styles.textInput}
autoCapitalize="none"
value={this.state.value}
onChangeText={(value) => {
this.setData(value);
}}
/>
<Text>{this.state.savedData}</Text>
<TouchableOpacity
activeOpacity={0.5}
onPress={() => {
this.setData(this.state.name);
}}
>
<View style={styles.saveButton}>
<Text style={styles.textStyle}>{"Save Data"}</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
activeOpacity={0.5}
onPress={() => {
this.getData(this.state.name);
}}
>
<View style={styles.saveButton}>
<Text style={styles.textStyle}>{"Get Data"}</Text>
</View>
</TouchableOpacity>
</View>
);
}
}
export default AsyncStorageExample;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
marginTop: 50,
},
textStyle: {
color: "white",
textAlign: "center",
},
saveButton: {
width: 100,
height: 40,
marginBottom:10,
marginTop:15,
borderRadius: 8,
borderColor: "white",
justifyContent: "center",
borderWidth: 1,
color: "white",
backgroundColor: "#7685ed",
},
textInput: {
width: "80%",
height: 100,
borderRadius: 5,
borderWidth: 1,
backgroundColor: "#7685ed",
},
});