title: How to pass entered input value from child to parent component in react native
body: <p>I have a InputField component which I have to use many times in other parent components. Now what I want is to pass the user's entered email and password to Login(parent) component. This is what I did,</p>
  <p>Inputfield.js</p>
  <pre><code>const InputField = ({
    isIcon = false,
    secureTextEntry = false,
    placeholder,
    onFieldChange
    }) =&gt; {
    const [isActive, setIsActive] = useState(false);
    const [fieldText, setFieldText] = useState(&quot;&quot;);
  
    return (
      &lt;View
        style={{
          ...styles.container,
          borderColor: isActive ? &quot;blue&quot; : &quot;#efefef&quot;,
        }}&gt;
        {isIcon ? (
          &lt;Feather
            name=&quot;search&quot;
            size={24}
            color={isActive ? &quot;blue&quot; : &quot;black&quot;}
            style={styles.searchIcon}
          /&gt;
        ) : null}
        &lt;TextInput
          style={styles.input}
          value={fieldText}
          onChangeText={(text) =&gt; {
            setFieldText(text);
            onFieldChange(!secureTextEntry, text);
          }}
          onFocus={() =&gt; {
            setIsActive(true);
          }}
          placeholder={placeholder}
          autoCorrect={false}
          selectionColor={&quot;blue&quot;}
          secureTextEntry={secureTextEntry}
        /&gt;
      &lt;/View&gt;
    );
  };
  </code></pre>
  <p>Login.js</p>
  <pre><code>const Login = () =&gt; {
    const [user, setUser] = useState({ email: null, password: null });
  
    const onUserChange = (email, text) =&gt; {
      setUser(email ? { email: text, ...user } : { ...user, password: text };
    });
  
    const handleLogin = async () =&gt; {
      try {
        const res = await axios.post(&quot;http://192.168.1.40:8000/login&quot;, user);
        console.log(&quot;got login response&quot;, res.data);
      } catch (error) {
        console.log(&quot;Post failed&quot;, error.message);
      }
    };
  
    const [isFontLoaded] = useFonts({ Arapey_400Regular_Italic });
  
    if (!isFontLoaded) return &lt;AppLoading /&gt;;
  
    return (
      &lt;View style={styles.login}&gt;
        &lt;BackgroundImageEffect /&gt;
        &lt;View
          style={{
            alignSelf: &quot;flex-start&quot;,
            position: &quot;absolute&quot;,
            top: variables.DIMENSIONS.height / 4,
            left: 15,
          }}&gt;
          &lt;Text
            style={{
              fontSize: 50,
              fontFamily: &quot;Arapey_400Regular_Italic&quot;,
              color: &quot;blue&quot;,
            }}&gt;
            Login
          &lt;/Text&gt;
          &lt;View style={{ borderWidth: 1, borderColor: &quot;blue&quot; }}&gt;&lt;/View&gt;
        &lt;/View&gt;
        &lt;View style={styles.form}&gt;
          &lt;View style={{ marginVertical: 10 }}&gt;
            &lt;InputField
              placeholder=&quot;Email or Phone&quot;
              onFieldChange={onUserChange}
            /&gt;
          &lt;/View&gt;
          &lt;View style={{ marginVertical: 10 }}&gt;
            &lt;InputField
              placeholder=&quot;Password&quot;
              onFieldChange={onUserChange}
              secureTextEntry={true}
            /&gt;
          &lt;/View&gt;
          &lt;View
            style={{ width: &quot;50%&quot;, alignSelf: &quot;flex-end&quot;, marginVertical: 10 }}&gt;
            &lt;TouchableHighlight
              style={{
                width: &quot;100%&quot;,
                backgroundColor: &quot;blue&quot;,
                borderRadius: 20,
                height: 40,
                justifyContent: &quot;center&quot;,
              }}
              activeOpacity={0.3}
              underlayColor=&quot;efefef&quot;
              onPress={() =&gt; handleLogin()}&gt;
              &lt;Text
                style={{
                  color: &quot;white&quot;,
                  fontFamily: &quot;Arapey_400Regular_Italic&quot;,
                  fontSize: 24,
                  textAlign: &quot;center&quot;,
                }}&gt;
                Login
              &lt;/Text&gt;
            &lt;/TouchableHighlight&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      &lt;/View&gt;
    );
  };
  </code></pre>
  <p>When I send the request using Postman, server responds correctly. But after pressing login button with the same request body login fails. That means there is something wrong while setting the user. So, What is the best way to pass that entered details to parent component?</p>