cannot display fetched api data in ReactJS

Question

am trying to display the first name of a user from a fetched api data... What could be wrong with this Reactjs code? i confirmed there was data already fetched from the api, but in displaying it... it returns blank and no errors

class App extends Component 
    constructor() {
      super()
      this.state = {
        loading: false,
        user: {}
      }
    }
    componentDidMount() {
      this.setState({loading: true})
      fetch("https://reqres.in/api/users/2")
      .then(response => response.json())
      .then(data => {
        this.setState({
          loading: false,
          user: data
        })
      })
    }
  render() {
    const text = this.state.loading ? "loading..." : this.state.user.first_name
    return (
      <div>first name: {text}</div>
    )
  }
}

export default App

You can make this a bit less redundant if you make this to this.state = {loading: true} and then removing this.setState({loading: true}) in componentDidMount — dcangulo
– dcangulo, Commented Oct 25, 2020 at 6:41
{"data":{"id":2,"email":"[email protected]","first_name":"Janet","last_name":"Weaver","avatar":"s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg"},"ad":{"company":"StatusCode Weekly","url":"statuscode.org/","text":"A weekly newsletter focusing on software development, infrastructure, the server, performance, and the stack end of things."}} — Brian Ngeywo
– Brian Ngeywo, Commented Oct 25, 2020 at 6:42
Try this way this.setState({ loading: false, user: data.data }) — Nooruddin Lakhani
– Nooruddin Lakhani, Commented Oct 25, 2020 at 6:43
This should help! In your example, data is not really the data but the result. My guess is that you can access the data in the result using data.items or data.data. (One of these should work) — Chetan Kinger
– Chetan Kinger, Commented Oct 25, 2020 at 6:49

Mohammad bd · Accepted Answer · 2020-10-25 16:59:11Z

1

You name the whole response data in the final then callback function. The response itself also contains another Object called data, to access that you should use data.data in your setState .

You might like to de-structure it like this in your callback:

fetch("https://reqres.in/api/users/2")
.then(response => response.json())
      .then({data} => {
        this.setState({
          loading: false,
          user: data
        })
})

answered Oct 25, 2020 at 16:59

Mohammad bd

134 bronze badges

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

Collectives™ on Stack Overflow

cannot display fetched api data in ReactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related