Blankpage.js

import React, {Component, Fragment} from 'react';
import ReactDOM from 'react-dom';

import axios from 'axios';
import { Provider } from 'react-globally';
import {
  Row,
  Col,
  Card,
  CardHeader,
  CardBody,
  Button,
  ButtonGroup,
  ButtonToolbar,
  ButtonDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from 'reactstrap';
const initialState = {
  counter: 0
}


class BlankPage extends Component {
    constructor(props)
    {
        super(props);
        this.state ={
          items: '',
          isLoaded: true,
          coursesid_list:[],
          course:''
        }
    }
   componentWillMount()
      {
      fetch('http://ec2-13-233-162-214.ap-south-1.compute.amazonaws.com:8085/scholarsbook/user/by_user_id?user_id=GlC8T2oBo3oYpNg-ea0R' ,   {headers: {
         "Accept": "application/json",
         "from_user_id": "GlC8T2oBo3oYpNg-ea0R",
      }})
         .then(response => { return response.json();
              })
         .then(responseData => {console.log(responseData); 
              return responseData;}).then(responseData=>{
      this.setState({
         items: responseData,
         isLoaded: true,
         coursesid_list: responseData.courses_list,
                   })
                                   })
      if(this.state.items)
         {
             while(this.state.items.courses_list) {
                 fetch('http://ec2-13-233-162-214.ap-south-1.compute.amazonaws.com:8085/scholarsbook/course/'+'this.state.items.courses_list[key]' ,   {headers: {
                    "Accept": "application/json",
                    "from_user_id": "GlC8T2oBo3oYpNg-ea0R",
                       }}) 
                         .then(response => { return response.json();
                         })
                         .then(responseData => {
                         console.log(responseData);
                         return responseData;
                         })
        }
      }
  }
  render() {
     var {isLoaded,items}= this.state;
  	 const item = this.state.coursesid_list;
     console.log(item);
     if(!isLoaded)
        {
        return <div> is loadig</div>
     }
        if(!this.state.items)
     {
      return <p> loadig...</p>
     }
    else
    { 		
       return (
    <Fragment>
    <ul>
         {
	      this.state.items.map((items, idx)=>{
		      return (
			  <ul>
                  <li key ={idx}>
                  {items.courses_list[0]}
			      </li>
			      <li>{items.courses_list[1]}</li>
			      <li>{items.courses_list[2]}</li>
			      <li>{items.courses_list[3]}</li>
		     </ul>
	)
	})
}
</ul>
</Fragment> );
     }
          }
         } export default BlankPage; 

 

//this is API response //
admin_mapping_list: Array [ "string" ]
​​
comments: "string"
​​
courses_list: (4) […]
​​​
0: "8FB-T2oBo3oYpNg-MqyB"
​​​
1: " 8VCAT2oBo3oYpNg-WKyw"
​​​
2: "8lCDT2oBo3oYpNg-OKxd"
​​​
3: " 81CET2oBo3oYpNg-pqwc"
​​​
length: 4
​​​
: Array []
​​
creation_timestamp: 0
​​
current_status_type_id: "string"
​​
custom_user_id: "string"
​​
first_name: "karan"
​​
forums_list: Array [ "string" ]
​​
group_id: Array [ "public" ]
​​
last_name: "sharma"
​​
last_updated_timestamp: 0
​​
roles_list: Array [ "string" ]
​​
roll_number: "string"
​​
status: "ACTIVE"
​​
status_message: "string"
​​
subscription_list: Array [ "string" ]
​​
user_full_text_name: "karan sharma"
​​
user_group_mapping_details: Array [ "string" ]
​​
user_id: "GlC8T2oBo3oYpNg-ea0R"
​​
user_name: "string"