title: How to properly update a state records in reacts
body: <p>The Code below successfully displays record from Atlassian Jira Storage API</p>
  <pre><code>//import goes here
  
  const fetchRec = async () =&gt; {
    const data = await storage.query().where('key', startsWith('Mykeysxxxxx')).getMany();
    return data.results;
  };
  
  const App = () =&gt; {
    const [projects] = useState(fetchRec);
  
    return (
      &lt;div&gt;
        // display or map projects records here
        {projects.map(project =&gt; (
          &lt;div&gt;
            &lt;b&gt;Fullname: {project.fullname}&lt;/b&gt;
  
            &lt;b&gt;Email: {project.email}&lt;/b&gt;
  
          &lt;/div&gt;
        ))}
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p><strong>Here is my Issue.</strong> I need to refresh the Records when new data is inserted.
  So I implemented the code below. when I click on refresh Records button, the new inserted record is not updated</p>
  <pre><code>&lt;Button text=&quot;Refresh Records&quot; onClick={async () =&gt; { await reloadRec(); }} /&gt;
  
  async function reloadRec() {
    fetchRec().then(projects);
    //const [projects] = useState(async () =&gt; await fetchRec());
  }
  </code></pre>
  <p><strong>Here is the full code efforts so far</strong></p>
  <pre><code>// Import goes here
  const fetchRec = async () =&gt; {
    const data = await storage.query().where('key', startsWith('Mykeysxxxxx')).getMany();
    return data.results;
  };
  
  
  async function reloadRec() {
    fetchRec().then(projects);
    //const [projects] = useState(async () =&gt; await fetchRec());
  }
  
  const App = () =&gt; {
    const [projects] = useState(fetchRec);
  
    return (
      &lt;div&gt;
        // display or map projects records here
        {projects.map(project =&gt; (
          &lt;div&gt;
            &lt;b&gt;Fullname: {project.fullname}&lt;/b&gt;
  
            &lt;b&gt;Email: {project.email}&lt;/b&gt;
  
          &lt;/div&gt;
        ))}
  
        &lt;Button text=&quot;Refresh Records&quot; onClick={async () =&gt; { await reloadRec(); }} /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>