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

Question

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()

Here https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch — Junius L, Dec 03 '22 at 06:43
Does this answer your question? [Fetch: POST JSON data](https://stackoverflow.com/questions/29775797/fetch-post-json-data) — Junius L, Dec 03 '22 at 07:04
my question is how to get each value from each inputs to getdata() — vivek kn, Dec 03 '22 at 07:08
did you check my answer? https://stackoverflow.com/a/74712807/8079868 — Muhammad Numan, Dec 12 '22 at 11:05

score 2 · Answer 1 · answered Dec 07 '22 at 06:58

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

score 1 · Accepted Answer · answered Dec 07 '22 at 01:44

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

score 0 · Answer 3 · answered Dec 04 '22 at 15:17

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

This does not remotely address the question. – Slbox Dec 11 '22 at 00:27 — Slbox, Dec 11 '22 at 00:27

score 0 · Answer 4 · answered Dec 06 '22 at 05:31

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.

Then you have to check that name is coming from route or not. Please share the log of userInfo. — Harsh Kukarwadiya, Dec 06 '22 at 06:09

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

4 Answers4

Installation

Usage