> For the complete documentation index, see [llms.txt](https://react-firebase.gitbook.io/rf/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://react-firebase.gitbook.io/rf/guides/build-a-react-app-with-firebase-auth-and-realtime-database/read-data.md).

# Read Data

2 components need to read data the Search component and the History List components

Our Search component looks like this : 

```jsx
const Search = () => {
  return <AutoComplete items={[]} />;
};
```

We want to connect it to the database at `user_bookmarks/` path.

![What our data looks like.](/files/-LKbAhUrDyFDNMiHM6mq)

The code we get :&#x20;

```jsx
const Search = () => {
  return (
    <FirebaseDatabaseNode path="user_bookmarks/">
      {data => {
        const { value } = data;
        if (value === null || typeof value === "undefined") return null;
        const keys = Object.keys(value);
        const values = Object.values(value);
        const valuesWithKeys = values.map(
          (value, i) =>
            ({
              link_url:value.link_url,
              link_description: value.link_description,
              id: keys[i]
            })
        );
        return <AutoComplete items={valuesWithKeys} />;
      }}
    </FirebaseDatabaseNode>
  );
};
```

That's it !

Now for the list showing user\_bookmarks sorted by user\_bookmarks/created\_on, we want to change

```jsx
<MenuItem>Item </MenuItem>
<MenuItem>Item</MenuItem>
<MenuItem>Item</MenuItem>
```

to a dynamic list of items :&#x20;

```jsx
<FirebaseDatabaseNode path="user_bookmarks/">
  {({ value }) => {
    if (value === null || typeof value === "undefined") return null;
    const keys = Object.keys(value);
    const values = Object.values(value);
    return values.map((val, i) => (
      <MenuItem key={keys[i]}>{val.link_description} </MenuItem>
    ));
  }}
</FirebaseDatabaseNode>;
```

That's it ! We now have an app that writes, reads and searches in Firebase !

You can check the full code[ here](https://github.com/rakannimer/react-firebase/tree/16a96e7d06285da2ea14ccb342b2ec295f019064/modules/tutorial-bookmarking-app/src).

And a gif here :&#x20;

![](/files/-LKbDCauFb3be9kLJp-1)