I have the following code that fetches data from the backend and displays it in a table. Everything is working correctly. Now, I need to make the first column in the table appear as a link. How can I achieve that?
const EditController = () => {
const initState = [
{name: "", ipaddr: "", port: 0, sshuser: "", sshport: 0, license: ""},
];
const [state, setState] = useState(initState);
const user = localStorage.getItem("user");
const token = localStorage.getItem("jwt");
const fetchControllers = async () => {
try {
const res = await axios.post('/exec/editcontroller', {user} , {headers: {
'Content-Type': 'application/json',
'Authorization': token,
}}).then( function (res) {
if(res.status === 200) {
setState(res.data);
}else {
return 'failure';
}
});
}catch(err) {
return 'error';
}
}
useEffect ( () => {
console.log('Inside useEffect');
fetchControllers();
}, []);
return (
<div className="medium-text">
<div className="center">
<h2>Controllers</h2>
<table id="tbl">
<thead>
<tr>
<th><a href="#">Name</a></th>
<th>IP Address</th>
<th>Port</th>
<th>SSH User</th>
<th>SSH Port</th>
<th>License</th>
</tr>
</thead>
{state.map((item) => (
<tr key={item.id}>
{Object.values(item).map((val) => (
<td>{val}</td>
))}
</tr>
))}
</table>
</div>
</div>
);
}
export default {EditController};