Display Array Data through map in react Typescript

Question

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": "pizzhut@pizza.com"
    },
    {
      "id": 2,
      "name": "Mc-Dondle",
      "address": "Dwarka Sector-15",
      "rating": "4.0",
      "email": "mcdondle@mcdon.com"
    }
  ],
  "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": {}
}

Answer 1

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>);