0

I'm new to React and am working on a small project. I'm trying to figure out why React won't read the data from my dataArray.js file. It comes up undefined when I console.log it. I made sure the data was being exported, the data was connected to the App.js file, and I have the data listed in the state.

I'm stumped as to what else to try.

import "./styles.css";
import { receiptsData } from "./dataArray";
import { Component } from "react";
import Receipt from "./components/Receipt";

class App extends Component {
  state = {
    receiptsData
  };
  render() {
    console.log(receiptsData);
    return (
      <div className="App">
        <Receipt receipts={this.state.receiptsData} />

      </div>
    );
  }
}
export default App;

I have a copy on condesandbox.io: https://codesandbox.io/s/korillaapp-0pm5y3

I know I'm getting other errors as well, but I think it's tied to not being able to read the data from the dataArray.js file.

potstickerNut
  • 21
  • 1
  • 6
  • 1
    You need to either change your import to `import receiptsData from "./dataArray";` since you exported it as `default` **OR** change the `export default receipts;` to `export const receiptsData;` for this to work. Kindly refer this answer to learn more about default and name import/export - https://stackoverflow.com/questions/36795819/when-should-i-use-curly-braces-for-es6-import – Lakshya Thakur Jul 04 '22 at 14:41
  • Thank you everyone for your help. I didn't realize the curly braces shouldn't be used in this case. I appreciate the time you spent helping me. – potstickerNut Jul 04 '22 at 14:55

3 Answers3

2

You have a default export in dataArray.js and named import in App.js.

So or do export const receiptsData = ... in dataArray.js, or import it as import receiptsData from "./dataArray"; in App.js

moondef
  • 71
  • 5
1

You exported your array as default export, so it should be imported like this :

import receiptsData from "./dataArray";

Or change your export like this :

export const receipts = [...]
AxelC
  • 11
  • 1
0

1) Replace Receipt.js with below code

import ReceiptItem from "./ReceiptItem";

const Receipt = (props) => {
  const { receipts } = props;
  const receiptList = receipts.map((receipt, idx) => {
    return(<div>
      <ReceiptItem receipt={receipt} key={idx} />
    </div>);
  });
  return (
    <div>{receiptList}</div>
  )
};
export default Receipt;

2) Add below line of code in the last in ReceiptItem.js

export default ReceiptItem;

3) You have default export receiptsData from dataArray.js so use receiptsData with {} in App.js

Ajay Adatiya
  • 1
  • 2