Question 32981 in React native Question posted in
The official React Native documentation can be found here.

Trying to return value from child to parent in react native

I am trying to call a textinput child component then obtain a textinput value from the component. I am trying to pass the value back to the parent. However, I keep getting an empty value back to the parent. I can’t seem to find my error. What am I doing wrong?

Parent

export default function HdInputs(){

  let [ht, setHt] = React.useState("");
  let hdInput =  (ht) => {
    console.log("ht", ht)

    setHt(ht);

  }

return(
       <View>
             <HdParameter hdInput={hdInput} text={"Ht (cm): "} />
       </View>
)
}

Child Function

export default function HdParameter(props){
    let [param, setParam] = React.useState("");

    let hdOutput = ()=> {
        props.hdInput(param);
    }
    return(
        <View style={AppStyles.hdParameter}>
        <Text style={AppStyles.boldText}>{props.text}</Text>
        <TextInput
          style={[AppStyles.inputLight, { alignSelf: "center" }]}
          placeholder=''
          defaultValue={props.defaultValue}
          placeholderTextColor={"#1b2747"}
          onChangeText={setParam}
          value={param}
          keyboardType="numeric"
          onInput={hdOutput} 

        />
        
      </View>
    )
}
Tags:

2

Answers


  1. 0

    You just forgot to add a param to the hdOutput function inside HdParameter.

    Normally you need to make the function this way:

    let hdOutput = (param) => {
   props.hdInput(param);
}
    Login or Signup to reply.
  2. 0

    This is a simple piece of code that show how to get some dat from a child component.

    import React from 'react';
import {TextInput} from 'react-native';

const Parent = () => {
  const [textFromChild, setTextFromChild] = React.useState('');

  const handleCallback = (text) => {
    setTextFromChild(text);
  };

  return (
      <Text>{textFromChild}</Text>
      <Child handleCallback={handleCallback} />
  );
};

const Child = (props) => {
  const [text, onChangeText] = React.useState('Text');

  const _onChangeText = (text) => {
    onChangeText(text);
    props.handleCallback(text)
  };

  return (
      <TextInput
        onChangeText={_onChangeText}
        value={text}
      />
  );
};

export default TextInputExample;

    Warning
    I can see you used a props called onInput. It doesn’t seem exist in the TextInput component from React Native. So maybe it’s a custom component from your project?

    This is your code updated:

    export default function HdInputs(){

  let [ht, setHt] = React.useState("");
  let hdInput =  (ht) => {
    console.log("ht", ht)

    setHt(ht);

  }

return(
       <View>
             <HdParameter hdInput={hdInput} text={"Ht (cm): "} />
       </View>
)
}

export default function HdParameter(props){
    let [param, setParam] = React.useState("");

    const _onChangeText = (text) => {
       setParam(text)
        props.hdInput(text);
    }
    
return(
        <View style={AppStyles.hdParameter}>
        <Text style={AppStyles.boldText}>{props.text}</Text>
        <TextInput
          style={[AppStyles.inputLight, { alignSelf: "center" }]}
          placeholder=''
          defaultValue={props.defaultValue}
          placeholderTextColor={"#1b2747"}
          onChangeText={_onChangeText}
          value={param}
          keyboardType="numeric"

        />
        
      </View>
    )
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search