React js call single array api

 Call Api

Api

Api.js

import React, { Component } from 'react'

export default class Api extends Component {

    // constructor(){

    //     super();

    //     this.state={

    //         users:null

    //     }

    // }

    // componentDidMount(){

    //     fetch("http://127.0.0.1:8000/api/myapi/")

    //     .then((resp)=>{

    //         resp.json()

    //         .then((result)=>{

    //          console.log(result);

    //         this.setState({users:result.name})

    //         // console.log(this.state.users.name);

    //         })

    //     })

    // }

    constructor(props) {

        super(props);

   

        this.state = {

            items: [],

            DataisLoaded: false

        };

    }

    componentDidMount() {

        fetch(

"http://127.0.0.1:8000/api/myapi")

            .then((res) => res.json())

            .then((json) => {

                this.setState({

                    items: json.data.user,

                    DataisLoaded: true

                });

                console.log(this.state.items);

                // console.log("data type of this api is :"+this.state.items);

            })

    }

    render() {

        const { DataisLoaded, items } = this.state;

        if (!DataisLoaded) return <div>

            <h1> Pleses wait some time.... </h1> </div> ;

   

        return (

           

        <div class="container">

            <div class="border rounded p-2">

            <strong>Name:</strong><i> {items.name}</i><br/>

            <strong>Mobile:</strong><i> {items.mobile}</i><br/>

            <strong>Email:</strong><i> {items.email}</i>

            </div>

           

            {/* <h1> Fetch data from an api in react </h1>  {

              items.map((item) => (

              <div>

                 

                    <b>Full_Name:</b> { item.name }, <br/>

                    <b>User_Email: </b>{ item.email } <br/>

                  </div>

                ))

            } */}

        </div>

       

    );

}

}

//   render() {

//     return (

//         <div>

//             api

//             {this.state.users ?

//             this.state.users.map((item,i)=>

//             <div><span>{item.name}</span></div>

//             ):null}

//         </div>

//     )

//   }

// }

App.js

import React, { Component } from 'react'

import Api from './components/Api'

import First from './components/First'

export default class App extends Component {

  render() {

    return (

      <div>

       <Api />

      </div>

    )

  }

}

OUTPUT