Extract a phpmyadmin table name using react - reactjs

Question

ello,
I created a CRUD application based on mysql database and react as framework,
As i’m going to use multiple tables in the database, I want to create a first page that extracts from the database all the tables names on a list. Once the list with the tables names is created, i want to be able to click on the table name and be redirected to the CRUD page that I already created.
The code below is what I used to create the first page but it failed to work.
I attached phpmyadmin database and the capture of structure of the project
import React, { useState, useEffect } from "react";
import axios from "axios";
const TabList = () => {
const [tab, settab] = useState("");
useEffect(() => {
axios.get('http://localhost/phpmyadmin/index.php?
route=/database/structure&server=1&db=crud_db')
.then(res=>{
console.log(res)
settab(res.data)
})
.catch(err=>{
console.log(err)
})
}, []);
return (
<div className="columns mt-5 is-centered">
<div className="column is-half">
<table className="table is-striped is-fullwidth">
<thead>
<tr>
<th>N</th>
<th>Name</th>
</tr>
</thead>
<tbody>
{tab.map((tab , index) => (
<tr key={tab.id}>
<td>{index + 1}</td>
<td>{tab.name}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
);
};
export default TabList;
tables
vsc
vsc