title: How to update the color of an icon after having checked the validity of a URL in typescript react with useState?
body: <p>I think my problem comes from the fact that the function that checks my url is async so the rest of my program goes forward with the value I already have and once the async function catches up the updated value is just waiting for the code to pass by this section of code again. :/</p>
  <p>The following bit of code is the function with which I get the new color for my Icon (I use axios to get the response.status in launchCheckStatus and return the color I want depending on the result)</p>
  <pre><code>function getLaunchState() {
    launchCheckStatus(formData.url).then(
    reponse =&gt; {
    setLaunchState(reponse)
  }).catch(error =&gt; {
    setLaunchState('red.500')
  })
  return strLaunch}
  </code></pre>
  <p>it is called from the updateFormStreamUrl</p>
  <pre><code>&lt;Input
        id=&quot;live-url&quot;
        name=&quot;url&quot;
        isRequired
        type=&quot;url&quot;
        placeholder=&quot;http://example.com&quot;
        value={formData.url}
        onChange={updateFormStreamUrl}
        width=&quot;400px&quot;
        /&gt;
    &lt;Icon formlabel=&quot;status icon&quot; color={strLaunch} viewBox=&quot;0 0 200 200&quot;&gt;
    &lt;path
      fill=&quot;currentColor&quot;
      d=&quot;M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0&quot;
    /&gt;
    &lt;/Icon&gt;
    &lt;p&gt;Status&lt;/p&gt;
  </code></pre>
  <p>I managed to change the color of the icon but it only happens after a new event and it only shows me the previous status. I have tried to call getLaunchState() directly in color Icon but then it gets called multiple times even though it updates in real time.</p>
  <p>An exemple would be :</p>
  <ul>
  <li>input is empty =&gt; gray(nothing in input)</li>
  <li>copy-paste good url =&gt; gray(nothing in input)</li>
  <li>take away a letter so it becomes a bad url =&gt; green(status 200)</li>
  <li>take away another letter or put back the one before =&gt; red(status 400)</li>
  </ul>