Reading JSON response from an API [objects] [Axios] [React]

reading_json_response_object.jsx

import React, { Component } from 'react';
import styled from 'styled-components'
import VendorCard from './VendorCard';
import TopHeader from '../TopHeader/TopHeader';
import back_btn from '../../img/back_btn.svg';


import axios from 'axios';
import { toaster, Pane, Spinner } from 'evergreen-ui'




const SinglePromoCodeContainer = styled.div`
height:100%;
box-shadow: 0px 4px 26px rgba(0, 0, 0, 0.24);
border-radius: 10px;
overflow:hidden;
padding: 25px;
border-left: 5px solid #27AE60
`
const SingleCodeTitle = styled.div`
font-family: Kanit;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 24px;
text-transform: uppercase;
color:#959393;
`

class SinglePromoCode extends Component {
    constructor(props) {
        super(props);
        this.goBack = this.goBack.bind(this);
        this.state = {
            'promo': [],
            'dataLoaded': false

        }


    }
    goBack() {
        this.props.history.goBack();
    }
    componentDidMount() {
      

        axios({
            method: 'get',
            url: 'YOUR_API_ENDPOINTS_HERE'+this.props.match.params.vendor, //remove this.props.match.params.vendor if not using react router

        })

            .then(res => {
                //this.setState({ promo: res.data,  })
                const vendors = res.data;
                this.setState({ promo: vendors, 
                    dataLoaded: true
                 });
            })
            .catch(function (error) {
                toaster.danger('Something went wrong',
                    {
                        id: 'loadIndicator',
                        description: '' + error
                    })
            })




            axios({
                method: 'get',
                url: 'YOUR_API_ENDPOINTS_HERE',
    
            })
            .then(res => {
                //this.setState({ promo: res.data,  })
                const vendorsInfo = res.data;
                this.setState({ 
                    current_vendor_name: vendorsInfo.rows[0].vendorname,
                    current_vendor_image: vendorsInfo.rows[0].vendorimage,
                    current_vendor_tagline: vendorsInfo.rows[0].vendortagline
                 });
            })



    }
    render() {
        const data = this.state.promo.rows;
    if (data == null) return null;
        let promoview = (

            <div className="row">
               

               {Object.keys(data).map(key => (

                        <div className="col-12 mb-4" key={data[key].code}>
                            <SinglePromoCodeContainer>
                                <SingleCodeTitle>Code</SingleCodeTitle>
                                {data[key].code}
                                <hr />
                                <SingleCodeTitle>Description</SingleCodeTitle>
                                {data[key].description}
                            </SinglePromoCodeContainer>
                        </div>

))}
               
            </div>
        )

        return (
            <>

                <TopHeader backaction={this.goBack} pageTitle={this.state.current_vendor_name} icon={back_btn} />
                <div className="container mt-4">
                    <VendorCard
                        current_vendor_name={this.state.current_vendor_name}
                        current_vendor_image={this.state.current_vendor_image}
                        current_vendor_tagline={this.state.current_vendor_tagline}

                    />
                    {!this.state.dataLoaded ? <Pane display="flex" alignItems="center" justifyContent="center" height={400}>
                        <Spinner />
                    </Pane> : null}
                    {promoview}
                </div>
            </>
        );


    }
}

export default SinglePromoCode;