returning json from a separate file in react.js

Question

trying to return json result to a component, trying to setup the json fetch in the separate file so i can reuse it. but stuggling

index.js

export const getData = (data) => {

return fetch('http://localhost:9968/api/vehicle')
.then(response => response.json())
.then((data) => {
    return response.json()
})

carlist.js

import React, { Component } from 'react';
import { getData } from '../api';

export default
class CarList extends Component {

constructor(props) {
    super(props);

    this.state = {
        data: null
    }
}

componentDidMount() {
    getData((data) => {
        this.setState({
            data
        })
    });
}

render() {
    if(this.state.data) {
        console.log(this.state.data);
        return (
            <h1>Car list</h1>
        )
    }

    return (<h1>Loading...</h1>);
}

}

this is the json i expect to print to screen, in postman i know the end point works but react is not returning anything

{
    "vehicles": [
        {
            "id": "x",
            "modelYear": "98",
            "url": "/api/vehicle/tt",
            "media": [
                {
                    "name": "vehicle",
                    "url": "/images/1.jpg"
                }
            ]
        },
        {
            "id": "z",
            "modelYear": "99",
            "url": "/api/vehicle/ff",
            "media": [
                {
                    "name": "vehicle",
                    "url": "/images/2.jpg"
                }
            ]
        },

    ]
   }

You pass a callback into getData in componentDidMount but you don't use it. — TaiNS
– TaiNS, Commented Sep 18, 2019 at 2:44

Akhil kumar Amarneni · Accepted Answer · 2019-09-18 07:00:20Z

2

This function you are using returns promise which should return json response.So remove the response.json() only return response from promise.

export const getData = () => {
 return fetch('http://localhost:9968/api/vehicle')
  .then(response => response.json())
  .then((response) => {
   return response
})

Then use async and await for componentDidMount and also remove the data that you are passing to getData function.

async componentDidMount() {
let response = await getData();
this.setState({
  data: response
  })
}

answered Sep 18, 2019 at 7:00

Akhil kumar Amarneni

2302 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ravibagul91 · Accepted Answer · 2019-09-18 08:46:32Z

1

Your getData function returns promise.

In CarList component you can do this,

componentDidMount() {
    getData(data).then((data) => {
        this.setState({
            data
        })
    });
}

Also your getData function is a bit wrong, you are returning response.json() instead of data, you should directly return data like,

export const getData = (data) => {
   return fetch('http://localhost:9968/api/vehicle')
    .then(response => response.json())
    .then((data) => {
      return data  //instead of `response.json()` return data directly
    })
}

Note: You are passing data to getData function but not using it, pass the data only when you need it.

edited Sep 18, 2019 at 8:46

answered Sep 18, 2019 at 3:40

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

1 Comment

ravibagul91 Over a year ago

@user2286483, have you tried this, is this helpful? Is it working?

Collectives™ on Stack Overflow

returning json from a separate file in react.js

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related