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

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?

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;

CodePudding user response：

Please change

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

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