Trouble while importing JSON Data to App.js

user_17093202 0
Viewed 94

I have to pass JSON data from Data.js to App.js. If I console.log data in Data.js everything is okay, however when I try to pass it for using in cards it shows me this Error.

Error

App.js

import React from "react";
import { Card, Button, Container, Row } from "react-bootstrap";
import "./styles.css";
import Data from "./components/Data";

function createCard(item) {
  return (
    <Card style={{ width: "18rem" }}>
      <Card.Img variant="top" src="" />
      <Card.Body>
        <Card.Title>{item.name}</Card.Title>
        <Card.Text>Kod: {item.article} </Card.Text>
        <Button variant="primary">{item.salePrices[0].value / 100}AZN</Button>
      </Card.Body>
    </Card>
  );
}

export default function App() {
  return (
    <div className="App">
      <Container>
        <Row className="justify-content-md-center">{Data.map(createCard)}</Row>
      </Container>
    </div>
  );
}

Data.js

import fetch from 'node-fetch';
var options = {
    headers: {
       'Authorization': 'Basic ' + loginPassword
    }   
 };

 (async () => {
   const response = await fetch(url, options);
   const data = await response.json(); 

})();
 
export default data;

P.S. Two moments which in my opinion can help to solve this problem.

First is when I try to console.log data outside of the async function it doesn't work, so that means I can reach the value only inside of that async function.

The second moment is when I add const test = "1"; to data.js and try to pass it export default test; to App.js it also shows the same error as I mentioned before.

Thanks in advance

node-fetch reactjs node.js import javascript
1 Answers

This is bcause the data is not yet fetched in the file and you exported that. You don't even need data.js. Try this code in your app.js

import React, { useState, useEffect } from "react";
import { Card, Button, Container, Row } from "react-bootstrap";
import fetch from "node-fetch";

function createCard(item) {
  return (
    <Card style={{ width: "18rem" }}>
      <Card.Img variant="top" src="" />
      <Card.Body>
        <Card.Title>{item.id}</Card.Title>
        <Card.Text>Kod: {item.title} </Card.Text>
        <Button variant="primary">{item.salePrices[0].value / 100}AZN</Button>
      </Card.Body>
    </Card>
  );
}

export default function App() {
  const [data, setData] = useState(null);

  const getData = async () => {
    const response = await fetch(url, options);
    const Data = await response.json();
    setData(Data);
  };

  useEffect(() => {
    getData();
  }, []);
  return (
    <div className="App">
      <Container>
        <Row className="justify-content-md-center">
          {data && data.map(createCard)}
        </Row>
      </Container>
    </div>
  );
}

Here getData is your async call of data.js. If you want modularity in your code and want that async call in another file then you need to import the promise from data.js file instead of data and resolve it in app.js file.

user_129829680
Related