import React, {useEffect,useState} from 'react'
import axios from 'axios';
export default function Read() {
    //create state containing incoming data array
    const [apiData,setApiData]=useState([]);
    //useEffect Hook, cos we need data when app loads
    useEffect(()=>{
	//console.log('Read calls useEffect()');
	axios.get('https://v1rgncy.api.swingbe.de/entities/info')
	    .then((response)=>{
		setApiData(response.data);
	    });
    },[]);
    return (
	<div>
	    <h1>Read</h1>
	    <table>
		<thead>
		    <tr>
			<th>Id</th>
			<th>Name</th>
		    </tr>
		</thead>
		<tbody>
		    {apiData.map((value,key) => {
			//console.log('key: '+key+', value: '+value);
			return (
			    <tr
				key={key}
			    >
				<td>{value[0]}</td>
				<td>{value[1]}</td>
			    </tr>
			);
		    })}
		</tbody>
	    </table>
	</div>
    );
};
