Read Data

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

Our Search component looks like this :

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

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

What our data looks like.

The code we get :

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

<MenuItem>Item </MenuItem>
<MenuItem>Item</MenuItem>
<MenuItem>Item</MenuItem>

to a dynamic list of items :

<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.

And a gif here :