How to update value of textinput in react native. I'm making notes taking app in which I get value from asynchoronus storage. And I want to edit that note value which I take as a default value. I want to update value in storage using textinput. My code is below. Please give a proper answer. Thank You.
import React, { useState } from 'react';
import { StyleSheet, Text, View,TextInput } from 'react-native';
import { FAB,IconButton } from 'react-native-paper';
import Header from './Header.js';
import AsyncStorage from '@react-native-community/async-storage';
export default function EditNotes({navigation}) {
const [noteTitle, setNoteTitle] = useState('')
const [noteDescription, setNoteDescription] = useState('')
const [noteTitlenew, setNoteTitlenew] = useState('')
const [noteDescriptionnew, setNoteDescriptionnew] = useState('')
getValueFunction = () => {
//function to get the value from AsyncStorage
AsyncStorage.getItem('onetitle').then(value =>
//AsyncStorage returns a promise so adding a callback to get the value
setNoteTitle(value)
);
AsyncStorage.getItem('onedesc').then(value =>
//AsyncStorage returns a promise so adding a callback to get the value
setNoteDescription(value)
);
};
return (
<>
<Header titleText = 'Edit Note' />
<View style={styles.container}>
{getValueFunction()}
<TextInput
placeholder = "Add Note Title here"
defaultValue = {noteTitle}
value = {noteTitlenew}
onChangeText = {setNoteTitlenew}
style = {styles.title}
/>
<TextInput
placeholder = "Add Note Description"
defaultValue = {noteDescription}
value = {noteDescriptionnew}
onChangeText = {setNoteDescriptionnew}
multiline={true}
style={styles.text}
scrollEnabled={true}
returnKeyLabel='done'
blurOnSubmit={true}
/>
<FAB
style={styles.fab}
small
icon='check'
/>
</View>
</>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
paddingTop:20,
paddingHorizontal:10
},
title:{
fontSize:24,
marginBottom:16,
borderWidth:1,
padding:15
},
text: {
fontSize:16,
borderWidth:1,
padding:15
},
fab:{
position:'absolute',
margin:20,
right:20,
bottom:0,
}
});
You do not need to use 2 separate states for default and value, instead, you can achieve the desired result by providing a single state for value and default value. Please update your code to the following
import React, { useState } from 'react';
import { StyleSheet, Text, View,TextInput } from 'react-native';
import { FAB,IconButton } from 'react-native-paper';
import Header from './Header.js';
import AsyncStorage from '@react-native-community/async-storage';
export default function EditNotes({navigation}) {
const [noteTitle, setNoteTitle] = useState('')
const [noteDescription, setNoteDescription] = useState('')
getValueFunction = () => {
//function to get the value from AsyncStorage
AsyncStorage.getItem('onetitle').then(value =>
//AsyncStorage returns a promise so adding a callback to get the value
setNoteTitle(value)
);
AsyncStorage.getItem('onedesc').then(value =>
//AsyncStorage returns a promise so adding a callback to get the value
setNoteDescription(value)
);
};
return (
<>
<Header titleText = 'Edit Note' />
<View style={styles.container}>
{getValueFunction()}
<TextInput
placeholder = "Add Note Title here"
defaultValue = {noteTitle}
value = {noteTitle}
onChangeText = {setNoteTitle}
style = {styles.title}
/>
<TextInput
placeholder = "Add Note Description"
defaultValue = {noteDescription}
value = {noteDescription}
onChangeText = {setNoteDescription}
multiline={true}
style={styles.text}
scrollEnabled={true}
returnKeyLabel='done'
blurOnSubmit={true}
/>
<FAB
style={styles.fab}
small
icon='check'
/>
</View>
</>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
paddingTop:20,
paddingHorizontal:10
},
title:{
fontSize:24,
marginBottom:16,
borderWidth:1,
padding:15
},
text: {
fontSize:16,
borderWidth:1,
padding:15
},
fab:{
position:'absolute',
margin:20,
right:20,
bottom:0,
}
});
Before you use react native carefully read the react native documentation.
About your code u don't want to need two state for updated and initial value, and you can pass the default value you in the useState and call it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.