Trying to render data on from database on page REACT

Question

I'm finally not getting any errors, but now I can't get the data coming in from my database to render on the page

Here is the trouble component:

import React, { Component } from 'react';
import axios from 'axios';

export default class ListPets extends Component {

    constructor(props) {
        super(props);

        this.state = {
            pets: {},
            isLoaded: false,
        }  
    }

    componentDidMount = () => {
        This. getPets ();
    };

    getPets = async () => {  
        const res = await axios.get('http://localhost:5000/pets');
        const pets = res.data;
        this.setState({ isLoaded: true, pets });
        console.log('Data has been received!');
    }

    render() {
        console.log('State: ', this.state);

        const { isLoaded, pets  } = this.state;

        if (!isLoaded) {
            return <div>Loading...</div>;
        } else {

            return (
                <div>
                    <ul>
                        {Object.entries(pets).map(([key, pet]) => ( 
                             <li key={key}>{pet.name}</li>
                        ))}
                    </ul>
                </div>
            );
        }
    }
}

Here is the data I'm trying to render from my database


{
    "_id": "5dfe7b55a3678700785c9b69",
    "species": "Collie",
    "name": "Dax",
    "age": "2",
    "petImage": "C:\\fakepath\\brown-and-white-dog-4633734_640.jpg"
}
{
    "_id": "5dfe828af33fa800ac8b49c8",
    "species": "lab",
    "name": "bea",
    "age": "1",
    "petImage": "C:\\fakepath\\puppy-1207816_640.jpg"
}
{
    "_id": "5dfea025ea5cc2016e528f5a",
    "species": "pittbull",
    "name": "nina",
    "age": "3",
    "petImage": "C:\\fakepath\\pitbull1.jpg"
}
{
    "_id": "5dfea0c229d0d4017b982f35",
    "species": "pittbull",
    "name": "nina",
    "age": "3",
    "petImage": "C:\\fakepath\\pitbull1.jpg"
}
{
    "_id": "5dfea63eb1505e018a2ba363",
    "species": "pittbull",
    "name": "Gina",
    "age": "3",
    "petImage": "C:\\fakepath\\pitbull1.jpg"
}
{
    "_id": "5dfea7a1fed64001b9632b8f",
    "species": "pittbull",
    "name": "kat",
    "age": "2",
    "petImage": "C:\\fakepath\\pitbull1.jpg"
}

For starters you need to downcase this in your componentDidMount function: this.getPets(); — Carl Edwards
– Carl Edwards, Commented Jan 12, 2020 at 17:44
If you're not servering your React page from localhost:5000, then ensure the database response has the appropriate headers (Access-Control-Allow-Origin) or it's going to get blocked as a CORS issue. — peteredhead
– peteredhead, Commented Jan 12, 2020 at 18:27

Razvan Bunga · Accepted Answer · 2020-01-12 21:57:34Z

1

If you are getting the data use the state

 return (
                <div>
                    <ul>
                        {this.state.pets.map(pet => ( 
                             <li key={pet.id}>{pet.name}</li>
                        ))}
                    </ul>
                </div>
            );
        }
    }
}

edited Jan 12, 2020 at 21:57

answered Jan 12, 2020 at 21:36

Razvan Bunga

11410 bronze badges

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

11 Comments

Joshua Lipscomb Over a year ago

Using that it returns the error TypeError: this.state.pets.map is not a function

Razvan Bunga Over a year ago

is because state.pets is an object make it an array

Joshua Lipscomb Over a year ago

How can I make it an array? Thanks by the way

Razvan Bunga Over a year ago

this.state = { pets: [], isLoaded: false, }

Razvan Bunga Over a year ago

change {} with [] from pets in your state

|

Collectives™ on Stack Overflow

Trying to render data on from database on page REACT

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related