title: cannot update a component from inside the function body of a different component - React Native?
body: <p>I have a child component &quot;Text Input&quot; and passes the value to as a prop like this</p>
  <pre><code>export default function MobileInput(props) {
    const [mobileNumber, setMobileNumber] = React.useState('');
  
    return (
      &lt;View style={styles.inputBox}&gt;
          &lt;TextInput
            value={mobileNumber}
            onChangeText={(number) =&gt; setMobileNumber(number)}
            onEndEditing={props.saveMobileNumber(mobileNumber)} // here
          /&gt;
      &lt;/View&gt;
    );
  }
  </code></pre>
  <p>In Parent, I got the value from child</p>
  <pre><code>const [mobile, setMobile] = useState('');
  
  
  const getMobile = (number) =&gt; {
      number ? setMobile(number) : null; // here's I got this warnning
      console.log('getMobile-number-from-child', number);
    };
  
  
  const reSendMobile = () =&gt; { // 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!');
      }
    };
  
  
  &lt;MobileInput saveMobileNumber={getMobile} /&gt;
  </code></pre>
  <p>I see this <a href="https://github.com/facebook/react/issues/18178#issuecomment-601425520" rel="nofollow noreferrer">issue</a> But I'm already using React <code>16.13.1</code></p>