Calling an Api with React

Question

So I want to call an API with react and my data is not showing up correctly I know I did it right but is there anything I am missing because I don't know why it is still showing Loading

Web screenshot

   import React from 'react';
import './App.css';

class App extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      students: [],
      isLoaded: false,
      error: null,
    }
  }

  componentDidMount() {
    fetch("http://localhost:3200/students")
    .then(res => res.json())
    .then((myresult) => {
      this.setState({
           isLoaded: true,
           students: myresult.students,
      });

  },
  (error) => {
    this.setState({
         isLoaded: true,
         error
    });
  }
)
}
render() {
    const {error, isLoaded, students} = this.state;
    if (error) {
      return <div>Error: {error.message}</div>
    } else if (isLoaded) {
      return <div> Loading ...</div>
    } else {
  return (
    <ul>
      {students && students.map(student => (
       <li key={student._id}>
          {student._id} {student.role_num}

       </li>
      ))}
  </ul>

  );
}
}
}

export default App;

I am trying to display information from this URL http://localhost:3200/students

I was following this link on how to call an API https://reactjs.org/docs/faq-ajax.html hey guys updated my code I am still getting the same issue stuck on loading I don't know whether I am passing in my data properly

I guess that by MountComponent you meant componentDidMount right ? Although, you are never setting the students property in your state — Arnaud Christ
– Arnaud Christ, Commented Jul 1, 2019 at 12:01

Shannon Johnstone · Accepted Answer · 2019-07-01 12:05:14Z

1

I think there a couple of things going on here but main points are

its componentDidMount not MountComponent
your not setting students correctly in state

answered Jul 1, 2019 at 12:05

Shannon Johnstone

1123 bronze badges

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

Comments

TARJU · Accepted Answer · 2019-07-01 12:10:04Z

0

In you code above for MountComponent see that you are setting up movieItems and your state is expecting students. To solve the issue use the code below.

MountComponent = () => {
    fetch("http://localhost:3200/students")
    .then(res => res.json())
    .then((myresult) => {
      this.setState({
           isLoaded: true,
           students: myresult.students,
      });

  },
  (error) => {
    this.setState({
         isLoaded: true,
         error
    });
  }
)
  }

answered Jul 1, 2019 at 12:10

TARJU

2,0041 gold badge16 silver badges17 bronze badges

5 Comments

Roy.B Over a year ago

he never calls MountComponent on his code, so you are right about students but still, this is a partial answer. either tell him to change it to CDM or tell him where and how to invoke it

Arnald Over a year ago

@Roy.B so I have updated my code and posted it on SO but still get loading

Roy.B Over a year ago

@Arnald that's because the if(!isLoaded), change it to if(isLoaded)

Arnald Over a year ago

@Roy.B ok fixed it now I get this error Cannot read property 'map' of undefined

TARJU Over a year ago

In your render function above you do not validate whether students is defined or not. change the code in render method as below What i added is students && before students.map do this and try in your code <ul> {students && students.map(student => ( <li key={student._id}> {student._id} {student.role_num} </li> ))} </ul>

Roy.B · Accepted Answer · 2019-07-01 12:20:54Z

0

change this:

} else if (!isLoaded) {

to:

} else if (isLoaded) {

edited Jul 1, 2019 at 12:20

answered Jul 1, 2019 at 12:06

Roy.B

2,10417 silver badges24 bronze badges

3 Comments

Roy.B Over a year ago

@Arnald see my answer

Roy.B Over a year ago

can you console log myresult ?

Roy.B Over a year ago

.then((myresult) => {

Shikha · Accepted Answer · 2019-07-03 14:09:18Z

0

Write this in your function and check

componentDidMount() {
  fetch("http://localhost:3200/students").then(res => {
  this.setState({ students : res.data })
  })
}

answered Jul 3, 2019 at 14:09

Shikha

1081 gold badge1 silver badge10 bronze badges

Collectives™ on Stack Overflow

Calling an Api with React

4 Answers 4

Comments

5 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

5 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related