import './App.css'; import { useState } from 'react'; import axios from 'axios'; function App() { const [datasetQuarry, setDatasetQuarry] = useState(''); const [tableQuarry, setTableQuarry] = useState(''); const [columns, setColumns] = useState(''); const [results, setResults] = useState(''); const [isVisible, setIsVisible] = useState(true); const fetchDataFromAPI = async (dataset, table, column) => { try { const response = await axios.get(`https://cat-fact.herokuapp.com/facts/?dataset=${dataset}&table=${table}&column=${column}`); const data = response.data; setResults(data); } catch (error) { console.error('Error fetching data:', error); setResults('Error fetching data'); } }; const handleButtonClick = () => { fetchDataFromAPI(datasetQuarry, tableQuarry, columns); }; const toggleVisibility = () => { setIsVisible(!isVisible); }; return ( {isVisible &&

Learning tables

setDatasetQuarry(e.target.value)} /> setTableQuarry(e.target.value)} />

setColumns(e.target.value)} />

}

Test tables

setDatasetQuarry(e.target.value)} /> setTableQuarry(e.target.value)} />

setColumns(e.target.value)} />

); } export default App;