How to change the value of TextInput in react native

Question

How to edit the TextInput? i have already value from database UserData.Email (test@gmail)

  const [ vEmail, setUserEmail] = useState('');
  const [ UserData, setUserData] = useState({});
  const [text, onChangeText] = React.useState('');
  <Formik
      initialValues={{ 
        Email: vEmail, 
       }}
       onSubmit={(values) =>{ console.log("submit"); submitForm(values)}}
    >
    {({ handleChange, handleBlur, handleSubmit, values, errors, isValid,touched,setFieldValue }) => (
<View style={formStyles.SectionStyle}>
  <TextInput
    name="Email"
    value={UserData.Email || ''}
    style={formStyles.inputStyle}
    underlineColorAndroid="#f000"
    placeholderTextColor="#8b9cb5"
    keyboardType="email-address"
    onChangeText={handleChange('Email')}

  />
  
</View>
)

UPDATE this is how i fetch record from my database using api

  const getProfile = async(token) =>{
    let jsonValue = await AsyncStorage.getItem('@storage_Key')
    jsonValue = JSON.parse(jsonValue);
    setProfile(jsonValue);
    console.log(config.API_URL + '/users/'+ jsonValue.userId)
    fetch(config.API_URL + '/users/'+ jsonValue.userId, {

      method: 'GET',
      //body: JSON.stringify(dataToSend),
      headers: {
        //Header Defination
        'Authorization': 'Bearer ' + token,
        'Content-Type': 'application/json',
      },
    })
    .then((response) =>  response.json().then(data=>({status:response.status, body:data})) )
    .then((response) => {
    console.log("User information = ",response);
    if(response.status==200)
        {
          if(response.body.length > 0)
          {         

            let _UserData = {};
            setUserData(response.body[0]);
            setUserEmail(decodeURI(response.body[0].Email))
           

          }else{
            setErrortext(response.body.msg);
            setPreventSubmit(true);
          }
        }else{
          setErrortext(response.body.msg);
          setPreventSubmit(true);
        };
      })
    }

Answer 1

As you are using Formik here you dont have to maintain a component level state for email here.

You can do like below which will use the state of Formik and can get that when using the handleSubmit, Sample code would be like below

<Formik
  initialValues={{
    Email: 'test1@gmail.com',
  }}
  onSubmit={(values) => {
    console.log('submit');
    alert(values.Email);
  }}>
  {({
    handleChange,
    handleBlur,
    handleSubmit,
    values,
    errors,
    isValid,
    touched,
    setFieldValue,
  }) => (
    <View style={formStyles.SectionStyle}>
      <TextInput
        name="Email"
        value={values['Email']}
        style={formStyles.inputStyle}
        underlineColorAndroid="#f000"
        placeholderTextColor="#8b9cb5"
        keyboardType="email-address"
        onChangeText={handleChange('Email')}
      />
      <Button title="Submit" onPress={handleSubmit}/>
    </View>
  )}
</Formik>

Instead of the hardcoded value for initial value, you can use your email address that you retrieve from your database (or API)

You can check the below demo https://snack.expo.io/@guruparan/d05b51

Answer 2

you are passing static value to the textInput. it should be dynamic

const [ vEmail, setUserEmail] = useState('');
const [ UserData, setUserData] = useState({});
const [text, onChangeText] = React.useState('');
<Formik
  initialValues={{ 
    Email: vEmail, 
   }}
   onSubmit={(values) =>{ console.log("submit"); submitForm(values)}}
>
{({ handleChange, handleBlur, handleSubmit, values, errors, 
isValid,touched,setFieldValue }) => (
<View style={formStyles.SectionStyle}>
<TextInput
  name="Email"
  value={vEmail}
  style={formStyles.inputStyle}
  underlineColorAndroid="#f000"
  placeholderTextColor="#8b9cb5"
  keyboardType="email-address"
  onChangeText={handleChange('Email')}

/>

</View>
)

vEmail should contain the email address fetched from database. Onchange also should set email using setUserEmail in the vEmail

Answer 3

const [ vEmail, setUserEmail] = useState('');
const [ UserData, setUserData] = useState({});
const [text, onChangeText] = React.useState('');
<Formik
  initialValues={{ 
    Email: vEmail, 
   }}
   onSubmit={(values) =>{ console.log("submit"); submitForm(values)}}
>
   {({ handleChange, handleBlur, handleSubmit, values, errors, 
   isValid,touched,setFieldValue }) => (
   <View style={formStyles.SectionStyle}>
   <TextInput
    name="Email"
    value={UserData.Email || ''} // this state needs to be update on change
    style={formStyles.inputStyle}
    underlineColorAndroid="#f000"
    placeholderTextColor="#8b9cb5"
    keyboardType="email-address"
    onChangeText={handleChange('Email')} // this is wrong here
  />  
  </View>

Your useState exists on this component. So, you should update your state in this component itself on the change of TextInput .

Your onChangeText should look, like this

onChangeText={(text)=>handleChange(text)}
or
onChangeText={handleChange}

In both ways, you will get the text value in handleChange as an argument, but you are using TextInput's value from UserData.Email . So, you should be updating that field in handleChange means your handleChange should exist in this component only.

Hope you are getting my point.