I'm trying to render the data from my database get this instead Failed to pile.

./src/ponents/list-petsponent.js Line 38:5: Expected an assignment or function call and instead saw an expression no-unused-expressions

Search for the keywords to learn more about each error.enter code here

Here is my code from the trouble ponent

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

export default class ListPets extends Component {

    constructor(props) {
        super(props);

        this.state = {
          pets: []
        };

    }


    ponentDidMount = () => {
      this.getPets();
    };    


    getPets = () => {  
    axios.get('http://localhost:5000/pets')
      .then((response) => {
        const data = response.data;
        this.setState({ pets: data });
        console.log('Data has been received!');
      })
      .catch((err) => {
        console.log(err);
      });
}

displayPet = (pets) => {

  if (!pets.length) return null;

  return pets.map((pet, index) => {
    <div key={index}>
      <h3>{pet.name}</h3>
      <p>{pet.species}</p>
    </div>
  });


};

render() {

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

return (

  <div className='adopt'>
    {this.displayPet(this.state.pets)}

  </div>

) } }

I'm trying to render the data from my database get this instead Failed to pile.

./src/ponents/list-pets.ponent.js Line 38:5: Expected an assignment or function call and instead saw an expression no-unused-expressions

Search for the keywords to learn more about each error.enter code here

Here is my code from the trouble ponent

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

export default class ListPets extends Component {

    constructor(props) {
        super(props);

        this.state = {
          pets: []
        };

    }


    ponentDidMount = () => {
      this.getPets();
    };    


    getPets = () => {  
    axios.get('http://localhost:5000/pets')
      .then((response) => {
        const data = response.data;
        this.setState({ pets: data });
        console.log('Data has been received!');
      })
      .catch((err) => {
        console.log(err);
      });
}

displayPet = (pets) => {

  if (!pets.length) return null;

  return pets.map((pet, index) => {
    <div key={index}>
      <h3>{pet.name}</h3>
      <p>{pet.species}</p>
    </div>
  });


};

render() {

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

return (

  <div className='adopt'>
    {this.displayPet(this.state.pets)}

  </div>

) } }

• javascript
• reactjs

2 Answers 2

You need to return a value at each pets.map iteration, currently you’re returning undefined.

  return pets.map((pet, index) => {
    return (
      <div key={index}>
        <h3>{pet.name}</h3>
        <p>{pet.species}</p>
      </div>
    )
  });

You have to wait until fetching data is pleted. You should have to define the loading bar while fetching.

class App extends Component {
    constructor() {
    super();

    this.state = {
       pageData: {},
       loading: true
    }

    this.getData();
  }

  async getData(){
      const res = await fetch('/pageData.json');
      const data = await res.json();
      return this.setState({ 
      pageData: data, 
      loading: false 
   });
 }

 ponentDidMount() {
    this.getData();
 }

 render() {
     const { loading, pageData } = this.state;
     if (loading){
          return <LoadingBar />
 }
 return (
  <div className="App">
    <Navbar />
  </div>
);

} }