Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

TextInput is returning undefined. How to convert undefined to String()?

I am making an OTP login with react native. the API is working fine and I have tested it on React.js. It works fine.
But I am getting errors while implementing it in React Native, TextField is returning undefined But I want a String.

This is the response from Backend:

Object {
  "hash": "ffe9c1edd9362ac06cc3049287cb60c07484c494c8b9e8305524f57a4efedefc.1644744727322",
  "number": "undefined",
  "otp": 438014,
}

As you can see the number is undefined. How can I convert it to String?

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

This is my TextInput code:

import axios from "axios";
import React from "react";
import { Button, TextInput, View } from "react-native";

function NumberIn(props) {
  const { value, handleChange, hashHandleChange } = props;

  const Continue = (e) => {
    axios
      .post("http://172.20.10.4:9000/api/otp", {
        number: `${value.number}`,
      })
      .then((res) => {
        console.log(res.data);

        const hash = res.data.hash;
        hashHandleChange(hash);
      })
      .catch((err) => {
        console.log(err);
      });

    e.preventDefault();
    props.nextStep();
  };

  return (
    <View>
      <TextInput
        placeholder="enter Your Number"
        value={value.number}
        onChangeText={(text) => handleChange("number",text)}
      />
      <Button onPress={Continue} title="get otp"></Button>
    </View>
  );
}

export default NumberIn;

And my SetForm function is :

import React, { useState } from "react";
import NumberIn from "./NumberIn";
import Otp from "./Otp";

function SetForm() {
  const [state, setState] = useState({
    number: "",
    hash: "",
    otp: "",
  });

  const [step, setStep] = useState(1);

  const handleChange = (input, inputText) => () => {
    setState({
      ...state,
      [input]: inputText,
    });
  };

  const hashHandleChange = (hash) => {
    setState({
      ...state,
      hash: hash,
    });
  };

  const nextStep = () => {
    setStep((prevStep) => prevStep + 1);
  };
  const prevStep = () => {
    setStep((prevStep) => prevStep - 1);
  };

  const { number, otp, hash } = state;
  const value = { number, hash, otp };
  switch (step) {
    case 1:
      return (
        <NumberIn
          nextStep={nextStep}
          hashHandleChange={hashHandleChange}
          handleChange={handleChange}
          value={value}
        />
      );
    case 2:
      return (
        <Otp
          nextStep={nextStep}
          prevStep={prevStep}
          handleChange={handleChange}
          value={value}
        />
      );
    default:
      return (
        <NumberIn
          nextStep={nextStep}
          hashHandleChange={hashHandleChange}
          handleChange={handleChange}
          value={value}
        />
      );
  }
}

export default SetForm;

>Solution :

Please change

  const handleChange = (input, inputText) => () => {
      setState({
        ...state,
        [input]: inputText,
      });
  };

to

  const handleChange = (input, inputText) => {
      setState({
        ...state,
        [input]: inputText,
      });
  };
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading