blankpage.js

import React,{Component} from 'react';
import axios from 'axios';
import { NavLink } from 'react-router-dom';
import ReactDOM from 'react-dom';
import Cookies from 'universal-cookie';

import { Provider } from 'react-globally';

import {
  Row,
  Col,
  Card,
  CardHeader,
  CardBody,
  Button,
  ListGroupItem,
  ListGroup,
  ButtonGroup,
  ButtonToolbar,
  ButtonDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from 'reactstrap';

export default class ErrorPage extends Component {
	 constructor(){
	 	super();
	 	this.state={
	 		'list2':[],
      isLoaded: true
	 	}
	 	// this.getItem = this.getItem.bind(this);    
	 }
	 //componentWillMount()
	// {
	// 	this.getItem();
//}
	componentWillMount()
	{
	var list;
	var i=0;
	list=localStorage.getItem("courses_list");	
	var lista= JSON.parse(list);
	console.log(lista);
	var course_id;
	let course_name=[];
	for(i=0;i<lista.length;i++)
	 { 
        course_id= lista[i];
        axios.get('http://ec2-13-233-162-214.ap-south-1.compute.amazonaws.com:8085/scholarsbook/course/'+course_id,{
          headers: {
            from_user_id:"z1SL2moBo3oYpNg-nwg6"
          }
        })
        .then(
          (response)=>{
            console.log(response.data.course_name);
            	this.state.list2.push(response.data.course_name);
          		course_name[i]= response.data.course_name;         
          })
      }
		console.log(course_name);
		localStorage.setItem('course_name',JSON.stringify(course_name) );
	}
       render()
	{
      {
      var {isLoaded,list2}= this.state;
 if(!isLoaded)
     {
        return <div> is loadig</div>
     }
     if(!this.state.list2)
     {
      return <p> loadig...</p>
     }
    else
    {
		  console.log(this.state.list2);
			let list1=this.state.list2;
			console.log(list1);
 return (
    <div>
      {
        list1.map(((item, i) =>
          
       <li key={i}> <Button  value={list1}>{list1}</Button></li>))
       }
      </div>

        );
      }
    }
  }
 }