title: React Native - how to use 'useState()' in another function
body: <p>I am trying to update the value of a state from another function.</p>
  <p>I have declared them like so:</p>
  <pre><code>
  const App () =&gt; {
  
  const [positionAX, setPositionAX] = useState(100)
  const [positionAY, setPositionAY] = useState(100)
  
  }
  </code></pre>
  <p>outside of <code>App</code> I have another function:</p>
  <pre><code>const setPosition = () =&gt; {
      setPositionAX(200);
      setPositionAY(200);
  
  }
  </code></pre>
  <p>When I call <code>setPosition()</code> I get the error:</p>
  <blockquote>
  <p>Cant find Variable: setPositionAX</p>
  <p>Cant find Variable: setPositionAY</p>
  </blockquote>
  <p>I tried to move <code>const [positionAX, setPositionAX] = useState(100)</code> to the top of my file but then I got the error:</p>
  <blockquote>
  <p>Invalid hook call. Hooks can only be called inside of the body of a function.</p>
  </blockquote>
  <p>How do I update that variable from other functions?</p>
  <h2>Edit 1 for @t-j-crowder</h2>
  <p>I can't seem to get this to work, I am not sure what I am doing wrong</p>
  <p>Here is a live snack example of the code you gave me: <a href="https://snack.expo.io/Cd!hwDQ0m" rel="noreferrer">https://snack.expo.io/Cd!hwDQ0m</a></p>
  <p>If I add an alert:</p>
  <pre><code>alert(&quot;pressed&quot;)
  </code></pre>
  <p>Into the handleClick function, that works so for some reason it is just not working with the <code>setPositionA([200, 200])</code>.</p>
  <p><strong>Also as an additional note:</strong>
  In my app example, there are two functions and the functionality of setting the state, and the functionality of displaying the state are separated which is why I am getting the issue I meant to present in my initial Stack overflow post.</p>
  <p>Here is a snack of that example of what I am trying to achieve:</p>
  <p><a href="https://snack.expo.io/6TUAkpCZM" rel="noreferrer">https://snack.expo.io/6TUAkpCZM</a></p>
  <p>I am using the 'positionX' and 'positionY' as vars to define the Top and Left position of an element which are rendered out, however, the actual setting of the <code>positionX</code> and <code>positionY</code> variable is done in another function</p>
  <p>I am a junior developer so I really want to thank you for all your help with this and also apologise if this is super nooby.</p>
  <h2>Edit 2 for: Muhammad Numan</h2>
  <p>I tried your way and I just can't seem to get it to work. I think there is some confusion as to what I want to achieve and where I want to achieve it. That is probably my fault as I am a noobie developer so please forgive me. I didn't want to just post all my code as I think its frowned upon for people to just code dump and be like &quot;fix this&quot; - however, for this situation its probably best haha.</p>
  <p>Here is a full snack of my code: <a href="https://snack.expo.io/uk8yb5xys" rel="noreferrer">https://snack.expo.io/uk8yb5xys</a></p>
  <p>What I want is this:</p>
  <p>The user is instructed to draw a line from the word &quot;start&quot; to the word &quot;end&quot;. If the line is drawn and the start point and endpoint of the users line match the given path, they are then presented with another line to draw and the position of &quot;start&quot; and &quot;end&quot; will move so the user knows where to draw.</p>
  <p>There is a comment line:</p>
  <blockquote>
  <p>// HERE IS WHERE I NEED TO UPDATE THE VALUES FOR START AND END</p>
  </blockquote>
  <p>This is where I need the word &quot;start&quot; and the word &quot;end&quot; to move to their new positions.</p>
  <p>At the moment, when you draw a complete line and remove your finger from the screen - nothing happens. However, when you put your finger down the start and end do move. I need them to move when the user lifts up their finger.</p>
  <p>I appreciate your time with this so thank you.</p>