How to change default value and update with new value in TextInput in react native

Question

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,
  }
});

Answer 1

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.

Answer 2

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,
  }
});