import React useEffect useState from react import App css import Cardc

 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
import React, {useEffect,useState} from 'react';
import './App.css';
import Cardc from './components/Card'
import Button from "react-bootstrap/Button";
function App() {
let url ='http://localhost:3000/api/cats/';
const [catsData,setCatsData] = useState('');
const CatCard = () => catsData.map(singleCatData=>(
<Cardc key={singleCatData.id} deleteCat={deleteCat} data={singleCatData}/>));
const deleteCat = async(id)=>{
await fetch(
url+id,
{method: 'delete'}
)
console.log(url+id ,'deleted')
}
useEffect(() => {
async function fetchData() {
const res = await fetch(url);
res
.json()
.then(res => setCatsData(res.result))
.catch(err => console.error(err));
}
fetchData();
},[]);
console.log(catsData)
return (
<div className={'container'}>
<Button>
create cat
</Button>
{
catsData && <CatCard/>
}
</div>
)}
export default App;