Not able to fetch data from API endpoint in ReactJS?

Question

I have created REST API endpoint i.e localhost:5000/api/match/:match_idNow I want to fetch data from this endpoint and display it on frontend but I am getting undefined error.

In server.js :

//Get a particular match stats
app.get('/api/match/:match_id', (req, res) =>{

    let match = req.params.match_id;

    matches.findOne({id: parseInt(match)}).then(Match =>{

        res.json(Match);
    });

});

In matchinfo.js :

import React, { Component } from 'react';

class Matchinfo extends Component {
    constructor(props){
        super(props);
        this.state = {
            info:[],
            loading:true
        };
    }

    componentDidMount(){
        fetch('api/match/:match_id')
        .then(res => res.json())
        .then(res => {
      console.log(res)
      this.setState({
        info:res,
        loading:false
      })
    })
    }

  render() {

    if (this.state.loading) {
            return <img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif" />
    }

    return (
      <div>
            <p class="match">MATCH {info.id}</p>
            <h4>{info.team1}</h4>
            <p>VS</p>
            <h4>{info.team2}</h4>
            <div class="winner">
            <h3>WINNER</h3>
            <h4>{info.winner}</h4>
            </div>
      </div>
    );
  }
}

export default Matchinfo;

In matchinfo component I am getting failed to compile after loader is finished spinning see screenshot for more clarification.

JSON Response :

Hemadri Dasari · Accepted Answer · 2018-01-26 08:02:26Z

1

Try below updated code. It should work as you expected

import React, { Component } from 'react';

class Matchinfo extends Component {
    constructor(props){
        super(props);
        this.state = {
            info:[],
            loading:true
        };
    }

    componentDidMount(){
        fetch('api/match/:match_id')
        .then(res => res.json())
        .then(res => {
      console.log(res)
      this.setState({
        info:res,
        loading:false
      })
    })
    }

    renderLoading(){
        <img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif" />
    }

  render() {
    const {info} = this.state;
    return (
      <div>
            {this.state.loading ? this.renderLoading(): ''}
            {this.state.info.length > 0 && (
                <div>
                <p class="match">MATCH {info.id}</p>
                <h4>{info.team1}</h4>
                <p>VS</p>
                <h4>{info.team2}</h4>
                <div class="winner">
                    <h3>WINNER</h3>
                    <h4>{info.winner}</h4>
                </div>
                </div>
                )}     
      </div>
    );
  }
}

export default Matchinfo;

edited Jan 26, 2018 at 8:02

answered Jan 25, 2018 at 17:43

Hemadri Dasari

34.2k41 gold badges125 silver badges166 bronze badges

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

12 Comments

stone rock Over a year ago

this.state.info.team1 , this.state.info.team2 this.state.info.winner nothing works why ?

Hemadri Dasari Over a year ago

Got it. I want to see console.log of this.state.info. Can you do console.log after api response.

Hemadri Dasari Over a year ago

Do console.log in render before return like console.log(this.state.info); let me know what it prints

stone rock Over a year ago

I have created the component Matchinfo which will get rendered onclick So I have to still make onclick functionality.

Hemadri Dasari Over a year ago

Man in Content.js you are iterating matches using map but in Matchinfo you are not iterating it because its a single object that you get in response. Thats the difference. This fetch('api/matches') returns list of matches and this fetch('api/match/:match_id') gives only one object that matches the matchid. First understand the functionality.

|

Collectives™ on Stack Overflow

Not able to fetch data from API endpoint in ReactJS?

1 Answer 1

12 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Linked

Related