CODEWITHSUNDEEP
reactjstypescriptreact-typescript
Ng Sharma
Ng Sharma

Reputation: 2192

Display Array Data through map in react Typescript

I try to display Array data but does not display the data on the React web page. AnyOne guide me where is my mistake and correct me. Please see the comment line //

/* eslint-disable */

import React, { Component } from 'react';

import axios from 'axios';


class RestaurantList extends Component<{}, any> {

    constructor(props: any) {
        super(props);
        this.state = { restoLists: null };
    }

    componentDidMount() {

        axios.get("http://localhost:3030/restauranst")
            .then((response) => {
                this.setState({ restoLists: response.data })
                console.log(response);
            })
            .catch((error) => console.error(error));
    }

    render() {
        console.log(this.state.restoLists);
        return (
            <div>
                <h1>RestaurantList</h1>
                {
                    this.state.restoLists ?
                        <div>
                            <ul>
                                {
                                    this.state.restoLists.map((itme: any) => {
                                        console.log(itme.name); // work this line
                                        <li>
                                            {itme.name} {/**Does not work this line */}
                                        </li>
                                    })

                                }
                            </ul>
                        </div>
                        :
                    <p>Please Wait...</p>
                }
            </div>
        );
    }
}

export default RestaurantList;

API Response

{
  "data": [
    {
      "id": 1,
      "name": "Pizza Hut",
      "address": "Dwarka Sector-14",
      "rating": "4.5",
      "email": "[email protected]"
    },
    {
      "id": 2,
      "name": "Mc-Dondle",
      "address": "Dwarka Sector-15",
      "rating": "4.0",
      "email": "[email protected]"
    }
  ],
  "status": 200,
  "statusText": "OK",
  "headers": {
    "cache-control": "no-cache",
    "content-type": "application/json; charset=utf-8",
    "expires": "-1",
    "pragma": "no-cache"
  },
  "config": {
    "url": "http://localhost:3030/restauranst",
    "method": "get",
    "headers": {
      "Accept": "application/json, text/plain, */*"
    },
    "transformRequest": [
      null
    ],
    "transformResponse": [
      null
    ],
    "timeout": 0,
    "xsrfCookieName": "XSRF-TOKEN",
    "xsrfHeaderName": "X-XSRF-TOKEN",
    "maxContentLength": -1,
    "maxBodyLength": -1
  },
  "request": {}
}

Upvotes: 1

Views: 33693

Answers (3)

hellowhirl
hellowhirl

Reputation: 511

You were just missing parenthesis inside the return block of your map method:

 this.state.restoLists.map((itme: any) => {(
    <li>
        {itme.name}
    </li>
 )})

Upvotes: 0

akhtarvahid
akhtarvahid

Reputation: 9779

Return from your map function as you are missing return. and loader also try to use through state. By default make isLoadding to false

state

this.state = { restoLists: null, isLoadding : false };
componentDidMount() {
        this.setState({isLoading: true})
        axios
        .get("http://localhost:3030/restauranst")
        .then((response) => {
            this.setState({ restoLists: response.data, isLoading: false})
        }).catch((error) => console.error(error));
 }

JSX

 const { restoLists } = this.state;
   return(
    <div>
    {isLoadding ? <ul>
        {restoLists && restoLists.map(({id, name}: any) => {
               return <li key={id}>{name}</li>;
            });
        }
       </ul>
     :<p>Loading...</p>}
    </div>
 )

Upvotes: 1

Sarun UK
Sarun UK

Reputation: 6766

You are not returning anything inside the map.

  this.state.restoLists.map(({id, name}: any) => {
           return <li key={id}>{name}</li>;
        });

Also you can use shorthand method of arrow function,

  this.state.restoLists.map(({id, name}: any) => <li key={id}>{name}</li>);

Upvotes: 7

Related Questions