# Cannot refresh record on button click via Forge

**URL:** <https://community.developer.atlassian.com/t/cannot-refresh-record-on-button-click-via-forge/51759>\
**Category:** Forge UI Kit and Custom UI\
**Tags:** forge-storage\
**Created:** [September 7, 2021, 8:16am UTC](https://community.developer.atlassian.com/t/cannot-refresh-record-on-button-click-via-forge/51759 "2021-09-07T08:16:33Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![NkemjikaGwacham](https://avatars.discourse-cdn.com/v4/letter/n/8797f3/32.png) [@NkemjikaGwacham](https://community.developer.atlassian.com/u/NkemjikaGwacham)\
**Post date:** [September 7, 2021, 8:16am UTC](https://community.developer.atlassian.com/t/cannot-refresh-record-on-button-click-via-forge/51759/1 "2021-09-07T08:16:33Z")

</div>

The Code below successfully displays record from Storage API via Forge

```auto
  const fetchRec = async () => {
const data = await storage.query().where('key', startsWith('Mykeysxxxxx')).getMany();
return data.results;
 };

const App = () => {
const [projects] = useState(fetchRec);
  return (
    <Fragment>

// display or map projects records here
<Button text="Refresh Records" onClick={async () => { await reloadRec();}} />
 </Fragment>
  );
}

```

**Here is my Issue.**  
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 added record is not updated

```auto
<Button text="Refresh Records" onClick={async () => { await reloadRec();}} />
 async function reloadRec() {
       fetchRec().then(projects);		
  }

```

**Here is the entire Codes**

```auto
const fetchRec = async () => {
  const data = await storage.query().where('key', startsWith('Mykeysxxxxx')).getMany();
  return data.results;
};
async function reloadRec() {
  fetchRec().then(projects);
}

const App = () => {
  const [projects] = useState(fetchRec);
  return (
    <Fragment>
      // display or map projects records here
      <Button text="Refresh Records" onClick={async () => { await reloadRec(); }} />
    </Fragment>
  );
}

```

---

<div class="post-metadata">

**Author:** ![RyanBraganza](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/ryanbraganza/32/38400_2.png) [@RyanBraganza](https://community.developer.atlassian.com/u/RyanBraganza)\
**Post date:** [September 7, 2021, 8:24am UTC](https://community.developer.atlassian.com/t/cannot-refresh-record-on-button-click-via-forge/51759/2 "2021-09-07T08:24:18Z")

</div>

Hi @NkemjikaGwacham,

You’ll need to use the second return value of `useState` to update the `projects`.

It should look something like…

```auto
  const [projects, setProjects] = useState(fetchRec);
  return (
    <Fragment>
      // display or map projects records here
      <Button text="Refresh Records" onClick={async () => {
        const newRecords = await fetchRec();
        setProjects(newRecords);
      }}/>
    </Fragment>

```

[https://developer.atlassian.com/platform/forge/ui-kit-hooks-reference/#function-signature](https://developer.atlassian.com/platform/forge/ui-kit-hooks-reference/#function-signature)

---

<div class="post-metadata">

**Author:** ![NkemjikaGwacham](https://avatars.discourse-cdn.com/v4/letter/n/8797f3/32.png) [@NkemjikaGwacham](https://community.developer.atlassian.com/u/NkemjikaGwacham)\
**Post date:** [September 7, 2021, 9:01am UTC](https://community.developer.atlassian.com/t/cannot-refresh-record-on-button-click-via-forge/51759/3 "2021-09-07T09:01:57Z")

</div>

Thanks

---

<div class="post-metadata">

**Author:** ![NkemjikaGwacham](https://avatars.discourse-cdn.com/v4/letter/n/8797f3/32.png) [@NkemjikaGwacham](https://community.developer.atlassian.com/u/NkemjikaGwacham)\
**Post date:** [September 7, 2021, 9:02am UTC](https://community.developer.atlassian.com/t/cannot-refresh-record-on-button-click-via-forge/51759/4 "2021-09-07T09:02:32Z")

</div>

Thanks alot