45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import {useParams, useLocation} from 'react-router-dom';
|
|
import { useGetMarketsQuery } from './coinList-api';
|
|
import Pager from './coinListPager';
|
|
|
|
const CoinList = (): JSX.Element => {
|
|
|
|
const location = useLocation()
|
|
const { page } = useParams();
|
|
|
|
const { data, error, isLoading, isSuccess, refetch } = useGetMarketsQuery();
|
|
console.log(page)
|
|
console.log(location.search)
|
|
|
|
return (
|
|
<div>
|
|
CoinList
|
|
<table>
|
|
<thead>
|
|
|
|
</thead>
|
|
<tbody>
|
|
{ data &&
|
|
data.map((item: any, index: any) => {
|
|
return (
|
|
<tr key={index}>
|
|
<td><img src={item.image} width="20" height="20" /></td>
|
|
<td>{item.symbol}</td>
|
|
<td>{item.id}</td>
|
|
<td>{item.name}</td>
|
|
<td>{item.high_24h}</td>
|
|
<td>{item.low_24h}</td>
|
|
<td>{item.price_change_percentage_24h}</td>
|
|
</tr>
|
|
)
|
|
})
|
|
}
|
|
</tbody>
|
|
</table>
|
|
<Pager />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default CoinList;
|