How do we use the data in the component?

[newt0]

Thanks for great library!

I can have got the data from Google Sheets by setting <GoogleSheetsProvider> in App.js.
Now I can see the data as state on the browser via React Developer tools(Chrome extension).

But I can't use the data like rendering it or display it by console.log.

How do we use the data in the component?
I tried it with the Docs, but I can't have understood it.

[athersharif]

@newt0 you'd want to use the withGoogleSheets HOC to access the data. check out the relevant import example here: https://github.com/athersharif/metis/blob/master/example/src/SingleSheet.js#L47

[newt0]

Thank you for your reply!

I fixed SingleSheet.js below.

import React from "react";
import PropTypes from "prop-types";
import { withGoogleSheets } from "react-db-google-sheets";  // fixed

const SingleSheet = (props) => (
  <div>
    <table className="table">
      <thead>
        <tr>
          <th>id</th>
          <th>name</th>
          <th>email</th>
        </tr>
      </thead>
      <tbody>
        {props.db.samplesheet.map((data) => (
          <tr key={data.id}>
            <td>{data.id}</td>
            <td>{data.name}</td>
            <td>{data.email}</td>
          </tr>
        ))}
      </tbody>
    </table>
    <button className="btn btn-primary" onClick={props.refetch}>
      Refresh
    </button>
  </div>
);

SingleSheet.propTypes = {
  db: PropTypes.shape({
    samplesheet: PropTypes.arrayOf(PropTypes.object),
  }),
};

export default withGoogleSheets("samplesheet")(SingleSheet);

And tried to use <SingleSheet> in App.js.
But it has the error like below.

It means that the google sheets, which I use, has something wrong?

[athersharif]

@newt0 there are a few things to test:

1. have you set up the API key as mentioned here? (please don't share the API key)
2. have you added the keys to the .env file as mentioned here? and then restarted the React app?
3. does the doc id match the one from your google doc? (your google sheets looks fine)
4. what do you see in the console? any errors? could you try logging the props to see what you're getting there?

[newt0]

I appreciate a lot!

1.have you set up the API key as mentioned here?

Yes, I got it.

2.have you added the keys to the .env file as mentioned here? and then restarted the React app?

Yes, I set the .env file on the root. And restarted the local server.

REACT_APP_GOOGLE_SHEETS_API_KEY="My API Key"

3. does the doc id match the one from your google doc? (your google sheets looks fine)
   Yes.

REACT_APP_GOOGLE_SHEETS_DOC_ID="1h3lSahG8BHHv7nhYFvctyv32Sf9MQBcCRCBk3gZdNOk"

[newt0]

4. what do you see in the console? any errors? could you try logging the props to see what you're getting there?

This looks like the cause.
index.js:1 [METIS]: data for samplesheet was empty

[athersharif]

that's helpful! thanks for the screenshots. could you try the setting the env variables without the " (quotation marks)?

for example:

REACT_APP_GOOGLE_SHEETS_DOC_ID=1h3lSahG8BHHv7nhYFvctyv32Sf9MQBcCRCBk3gZdNOk

and then restart the React app? if the problem persists, do you have a repo up that i could take a look at?

[newt0]

Thank you for your nice answer!

could you try the setting the env variables without the " (quotation marks)?

I set the env variables without the "" like below.

REACT_APP_GOOGLE_SHEETS_API_KEY=MY_API_KEY
REACT_APP_GOOGLE_SHEETS_DOC_ID=1h3lSahG8BHHv7nhYFvctyv32Sf9MQBcCRCBk3gZdNOk

And then restarted, the same problem persits.

But I got some things.(Next message)

[newt0]

I comment out the code about map method in SingleSheet.js like below.

 <tbody>
        {/* {props.db.samplesheet.map((data) => (
          <tr key={data.id}>
            <td>{data.id}</td>
            <td>{data.name}</td>
            <td>{data.email}</td>
          </tr>
        ))} */}
      </tbody>

And then succeeded rendering the screen, but the same error occurred.
(index.js:1 [METIS]: data for samplesheet was empty )

By checking React Developer Tools of the chrome extension, <GoogleSheetsProvider> has the data.
Meanwhile, <SingleSheet> has no data.

I maybe have to pass the props to <SingleSheet> in App.js?
Now, I write App.js like below.

const App = () => (
  <GoogleSheetsProvider>
    <div className="container">
      <h1>Metis Examples</h1>
      <div className="section">
        <h2>Single Sheet Example</h2>
        <SingleSheet />
      </div>
    </div>
  </GoogleSheetsProvider>
);

[newt0]

And also, by checking React Developer Tools of the chrome extension, I can see the data from google sheets.
But the google sheet which pass the data is not the one I set in the env file.
REACT_APP_GOOGLE_SHEETS_DOC_ID looks ignored.
I might have put wrong setting about google cloud platform.
I will check it again.

[newt0]

Finally, succeeded! Now it is perfectly working!

It was just a careless mistake.
There were two .env file on the root and src.
I were not aware of it, so I confused.

[athersharif]

great! glad you figured it out. for anyone else facing the same issue and getting here, the .env file is traditionally placed at the root folder level. but different projects can have different structures. however, the core requirement stays the same -- however you set up the environment variables, they should be accessible through process.env.

[newt0]

【Not question】
I deeply appreciate it!

By the way, I traslated your medium article about Metis into Japanese.
And published it on the "Qiita" ,which is the largest blog platform for engineer of the Japan(Maybe it's similar to reddit)

https://qiita.com/newt0/items/4039c5662fe41cb95bd3

Thank you for awesome library and being nice, again!

[athersharif]

that's awfully nice of you! thanks so much!