cannot update a component from inside the function body of a different component - React Native?

Question

I have a child component "Text Input" and passes the value to as a prop like this

export default function MobileInput(props) {
  const [mobileNumber, setMobileNumber] = React.useState('');

  return (
    <View style={styles.inputBox}>
        <TextInput
          value={mobileNumber}
          onChangeText={(number) => setMobileNumber(number)}
          onEndEditing={props.saveMobileNumber(mobileNumber)} // here
        />
    </View>
  );
}

In Parent, I got the value from child

const [mobile, setMobile] = useState('');


const getMobile = (number) => {
    number ? setMobile(number) : null; // here's I got this warnning
    console.log('getMobile-number-from-child', number);
  };


const reSendMobile = () => { // other function I want to call passed on mobile number I got from child component 
    if (mobile?.length) {
      alert('Done');
      setReSend(false);
      setSeconds(10);
    } else {
      alert('Please write your number before press send!');
    }
  };


<MobileInput saveMobileNumber={getMobile} />

I see this issue But I'm already using React 16.13.1

What warning you are getting?

Arnab
– Arnab

2020-07-18 18:08:36 +00:00
Commented Jul 18, 2020 at 18:08 — Arnab
– Arnab, Commented Jul 18, 2020 at 18:08

Ben Rivello · Accepted Answer · 2020-07-18 18:23:10Z

5

TextInputs property onEndEditing accepts a function that is called when text input ends.. Instead of a function, you are passing the result of your props.saveMobileNumber function that is called when the component renders. Try passing a function that calls saveMobileNumber instead:

onEndEditing={() => props.saveMobileNumber(mobileNumber)}

Your code will be much easier to read/debug if you avoid keeping the same state in multiple components. You can pass mobile and setMobile to the child through props and avoid having to create separate state for the same data.

answered Jul 18, 2020 at 18:23

Ben Rivello

1961 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rohan Agarwal · Accepted Answer · 2020-07-18 18:12:50Z

1

Try this:

<View style={styles.inputBox}>
        <TextInput
          value={mobileNumber}
          onChangeText={(number) => setMobileNumber(number)}
          onEndEditing={() => props.saveMobileNumber(mobileNumber)} // change here
        />
</View>

answered Jul 18, 2020 at 18:12

Rohan Agarwal

2,6093 gold badges20 silver badges37 bronze badges

Comments

Rupesh Chaudhari · Accepted Answer · 2020-07-18 22:12:20Z

0

The event onEndEditing accepts a function call Just update to call a arrow function :

onEndEditing={() => props.saveMobileNumber(mobileNumber)}

answered Jul 18, 2020 at 22:12

Rupesh Chaudhari

3082 gold badges3 silver badges12 bronze badges

Comments

Mobarak Hossen · Accepted Answer · 2021-02-01 11:00:27Z

0

For me, i was updating activity title outside the useEffect hook. When i moved the code

into useEffect hook, the error just gone.

answered Feb 1, 2021 at 11:00

Mobarak Hossen

4813 silver badges5 bronze badges

Collectives™ on Stack Overflow

cannot update a component from inside the function body of a different component - React Native?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related