how to submit a form in react native and submit to a post api

vivekkn
December 3, 2022
237 views
2 votes
4 Answers

I want to save the values from all input fields to getdata(), but I am getting undefined value

export default function Signupfor(props) {
  // const phoneInput = useRef < PhoneInput > null;
  const [text, setTextname] = useState();
  function getdata() {
    console.log('dsd');
    console.log(text);
  }

  const {userInfo, log} = props?.route?.params;
  console.log(log.name);
  return (
    <View style={styles.prheight}>
      <View style={styles.form}>
        <Text style={styles.r}>One Last Step</Text>
        <TextInput
          style={styles.forminput}
          label="Name"
          value={userInfo.user.name}
          onChangeText={text => setTextname(text)}
        />
        <TextInput
          style={styles.forminput}
          label="Email"
          value={userInfo.user.email}
          onChangeText={text => setTextemail(text)}
        />

        <TextInput
          style={styles.forminput}
          label="Whatsapp Number"
          keyboardType="numeric"
          value={userInfo.user.number}
          onChangeText={text => setTextnumber(text)}
          // value={this.state.myNumber}
          maxLength={10} //setting limit of input
        />
       
      </View>
      <View style={styles.buttonw}>
        <Button color="#7743DB" title="Lets Go" onPress={() => getdata()} />
      </View>
    </View>
  );
}

Here, name and email should not be able to be edited. I want to pass the value from value={userInfo.user.name} to the getdata()

Tags: react-native

Answers

You can use a library like https://react-hook-form.com to check an example with react native on video.
Or you can right it yourself, in the example below any time you need access to input values you can read it from text and number

const UselessTextInput = () => {
  const [text, onChangeText] = useState("Useless Text");
  const [number, onChangeNumber] = useState(null);

  return (
    <SafeAreaView>
      <TextInput
        style={styles.input}
        onChangeText={onChangeText}
        value={text}
      />
      <TextInput
        style={styles.input}
        onChangeText={onChangeNumber}
        value={number}
        placeholder="useless placeholder"
        keyboardType="numeric"
      />
    </SafeAreaView>
  );
};

You can do something like this!!

export default function Signupfor(props) {
const {userInfo, log} = props?.route?.params;
  const [name, setName] = useState(userInfo?.user?.name);
  const [phone, setPhone] = useState(userInfo?.user?.number);

  function getdata() {
    console.log("name",name)
    console.log("phone",phone)
  }
     
  return (
    <View style={styles.prheight}>
      <View style={styles.form}>
        <Text style={styles.r}>One Last Step</Text>
        <TextInput
          style={styles.forminput}
          label="Name"
         // this value must be same with useState
          value={name}
          onChangeText={text => setName(text)}
        />    
        <TextInput
           style={styles.forminput}
           label="Mobile"
           value={phone}
           onChangeText={text => setPhone(text)}
         />      
      </View>
      <View style={styles.buttonw}>
        <Button color="#7743DB" title="Lets Go" onPress={() => getdata()} />
      </View>
    </View>
  );
}

Same goes for email.

- Bash_profile
- December 7, 2022 at 2:44 am
- 0 votes
0
Your original method doesn’t populate the state unless you edit the text input field, this is because your initialState doesn’t have a value to start with. so firing getData() is reading empty state if the fields havent been changed.

onChangeText={text => setTextname(text)}
Only fire if you edit the textInput field.

Also I think you might be missing props, so first check if you are getting the correct data from props by logging it.

Once you have confirmed the props are available.

Set the initialState for name to userInfo.user.name
```
const { userInfo } = props?.route?.params;
const [name, setName] = useState(userInfo.user.name);
```
Then pass the state name to your TextInput and it should populate the value by reading from state.
```
return (
  <>
    <TextInput
      placeholder="name"
      value={name}
      onChangeText={(text) => setName(text)}
    />
    <Button title="Submit" onPress={() => getData()} />
  </>
)
```
Make sure to create states for any additional values you wish to save.
```
const [name, setName] = useState(userInfo.user.name);
const [email, setEmail] = useState(userInfo.user.email);
```
Login or Signup to reply.

you can use formik package for making form in react native

Installation

yarn add formik

Usage

import { Formik } from "formik";

export default function Signupfor(props) {

  const { userInfo, log } = props?.route?.params;
  console.log(log.name);
  return (
    <Formik
      initialValues={{
        name: userInfo.user.name,
        email: userInfo.user.email,
        number: userInfo.user.number,
      }}
      onSubmit={async (values, actions) => {
        try {
           console.log("name", values.name);
          console.log("phone", values.number);
          
          const params = {
            full_name: values.name,
            email: values.email,
            phone_number: values.number,
          };

         
        } catch (error) {
          let message = error.message;
          console.log(message)
        } finally {
          actions.setSubmitting(false);
        }
      }}
    >
      {({
        handleChange,
        setFieldValue,
        handleSubmit,
        values,
        errors,
        touched,
        isSubmitting,
      }) => (
        <View style={styles.prheight}>
          <View style={styles.form}>
            <Text style={styles.r}>One Last Step</Text>
            <TextInput
              style={styles.forminput}
              label="Name"
              value={values.name}
              onChangeText={handleChange("name")}
            />
            <TextInput
              style={styles.forminput}
              label="Email"
              value={values.email}
              onChangeText={handleChange("email")}
            />

            <TextInput
              style={styles.forminput}
              label="Whatsapp Number"
              keyboardType="numeric"
              value={values.number}
              onChangeText={handleChange("number")}
              // value={this.state.myNumber}
              maxLength={10} //setting limit of input
            />
          </View>
          <View style={styles.buttonw}>
            <Button
              color="#7743DB"
              title="Lets Go"
              onPress={() => handleSubmit()}
            />
          </View>
        </View>
      )}
    </Formik>
  );
}

Please signup or login to give your own answer.

Click here to cancel reply.