File size: 1,552 Bytes
2e8db96 9751a50 18d5404 2e8db96 9751a50 5874113 1aea6f0 5874113 1aea6f0 2e8db96 18d5404 1aea6f0 18d5404 1aea6f0 18d5404 1aea6f0 18d5404 2e8db96 d81fbeb 2e8db96 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
import logo from './logo.svg';
import './App.css';
import axios from "axios";
import { useState } from 'react';
import { useEffect } from 'react';
import {
Table,
TableHeader,
TableBody,
TableColumn,
TableRow,
TableCell
} from "@nextui-org/table";
function App() {
const [statements, setStatements] = useState([
"Empty statements"
]);
// function to fetch all statements from BE
useEffect(() => {
axios
.get("/data")
.then((response) => {
console.log("Got data ", response.data);
setStatements(JSON.stringify(response.data));
})
.catch((error) => {
console.log("There was an error retrieving the statement list: ", error);
setStatements([["error","text",JSON.stringify(error)]]);
});
}, []);
console.log("statements ", statements);
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Experiments
<Table
aria-label="Experiments"
>
<TableHeader>
<TableColumn>Subject</TableColumn>
<TableColumn>Predicate</TableColumn>
<TableColumn>Object</TableColumn>
</TableHeader>
<TableBody>
{statements.map((statement,index)=>(
<TableRow key={index}>
<TableCell>{statement[0]}</TableCell>
<TableCell>{statement[1]}</TableCell>
<TableCell>{statement[2]}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</p>
</header>
</div>
);
}
export default App;
|