get data from server using axios with react

Question

I am new using react and I'd like to get data from server, so I tried:

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = { movies: [] }
  }

  componentDidMount() {
    axios.get('https://facebook.github.io/react-native/movies.json')
      .then(response => this.setState({ movies: response.data.data }))
  }

  renderUsers() {
    const { movies } = this.state

    return movies.map( user => (
      <div key={id}>{title} {releaseYear}</div>
    ))
  }

  render() {
    return <div>{ this.renderUsers() }</div>
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
)

and my html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>

  <div id="container"></div>

    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js" crossorigin></script>

    <!-- Load our React component. -->
    <script src="movies.js" type = "text/babel"></script>

  </body>
</html>

the problem is, I get nothing in my page. any ideas what is wrong?

Did you package this with webpack/babel or are you trying to run it as shown? If the latter then I believe you need to include babel otherwise your JSX won't be valid. Include: <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> in your head section. If that's not it, then use the developer console of your browser and share any error messages you see. — jarmod
– jarmod, Commented Dec 5, 2019 at 19:17
Seems the response data will be response.data.movies instead of response.data.data. Another problem I see is, in renderUsers it should be <div key={user.id}>{user.title} {user.releaseYear}</div>. You might wanna use movie instead of user too. — Sai Sandeep Vaddi
– Sai Sandeep Vaddi, Commented Dec 5, 2019 at 19:21

Sunil Chaudhary · Accepted Answer · 2019-12-05 19:23:41Z

Few issues which I have fixed

setState in componentDidMount is picking wrong key. You need to set response.data.movies instead of response.data.data
the map function is used incorrectly in renderUsers function. You need to pick id, title and releaseYear from the correct variable instead of directly using them

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = { movies: [] }
  }

  componentDidMount() {
    axios.get('https://facebook.github.io/react-native/movies.json')
      .then(response => this.setState({ movies: response.data.movies }))
  }

  renderUsers() {
    const { movies } = this.state

    return movies.map( data => (
      <div key={data.id}>{data.title} {data.releaseYear}</div>
    ))
  }

  render() {
    return <div>{ this.renderUsers() }</div>
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>

  <div id="container"></div>

    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js" crossorigin></script>

    <!-- Load our React component. -->
    <script src="movies.js" type = "text/babel"></script>

  </body>
</html>

thank you very much! In localhost it doesn't work, but I think it might be some browser protection. any ideas how to make it work in localhost?
Are you getting any errors in the browser console? The way you have included the movies.js component using script tag is incorrect. You need to follow what @jarmod has commented and then post any errors which you are getting
oh, sorry, it worked. babel.min.js was not in head section... thanks!

Collectives™ on Stack Overflow

get data from server using axios with react

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related