title: How retrieve data from an API in JSON to a list in React.Js
body: <p>I am trying to retrieve data from an API in React.Js but there is an small issue with the componentDidMount function.</p>
  <p>Here is the API   <a href="https://projects.cmsbox.in/app/bms/movie/public/api/upcomingMovie" rel="nofollow noreferrer">https://projects.cmsbox.in/app/bms/movie/public/api/upcomingMovie</a></p>
  <p>I have tried this code with other API and it worked but in this case its not working. Also checked the API in Postman and everything seems to be fine.</p>
  <p>Thanks in advance :)</p>
  <pre><code>import React, { Component } from 'react';
  import './index.css';
  import MovieCard from './moviecard'
  import Homepage from './homepage';
  import { render } from '@testing-library/react';
  
  class UpcommingMovies extends Component{
  
      constructor(props){
          super(props);
          this.state = {
              upcmngmovie_list: [],
              dataList:[],
              isLoaded:false,
          }
      }
  
  
      componentDidMount(){
          fetch('https://projects.cmsbox.in/app/bms/movie/public/api/upcomingMovie')
          .then(response=&gt;response.json())
          .then(data=&gt;{
            this.setState({
              isLoaded:true,
              dataList:data,
              upcmngmovie_list:dataList,
            })
          });
        }
  
  
      render(){
  
          var{isLoaded,upcmngmovie_list}=this.state;
  
          function upcomngmoviecards(val){
              return(
                  &lt;div className=&quot;row&quot;&gt;&lt;MovieCard image={val.image} movie_name={val.movie_name}/&gt;&lt;/div&gt;
              );
          }
  
          if(!isLoaded){
              return &lt;div&gt;Loading...&lt;/div&gt;;
            }
  
          else{
              return (
                  &lt;&gt;
                      &lt;Homepage /&gt;
                      &lt;div className=&quot;main&quot;&gt;
                          &lt;h3&gt;Upcomming Movies&lt;/h3&gt;
                          &lt;div className=&quot;cardlist&quot;&gt;
          
                              {upcmngmovie_list.map(upcomngmoviecards)}
                              
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/&gt;
              )
          }
  
      }
      
  }
  
  export default UpcommingMovies;
  
  </code></pre>