import { useRef,useState } from "react";
import axios from "axios";
const GetExp1=()=>{
const [arr,setArr]=useState([]);
const ref1=useRef(null);
const fetch_data=()=>{
getData();
}

const getData=async ()=>{
const res=await axios.get(`https://reqres.in/api/users?page=${ref1.current.value}`);
const {data:x}=res;
const {data}=x;
setArr(data);
}
return(
<>
<input type="number" ref={ref1}></input>
<button onClick={fetch_data}>GetData</button>
<br></br>
{
arr.length!=0?(<table border={1}
align="center"
cellSpacing={10}
cellPadding={10}>
<tr>
<th>id</th>
<th>first_name</th>
<th>last_name</th>
<th>email</th>
<th>avatar</th>
</tr>
{
arr.map((element,index)=>{
return(
<tr key={index}>
<td>{element.id}</td>
<td>{element.first_name}</td>
<td>{element.last_name}</td>
<td>{element.email}</td>
<td><img src={element.avatar}></img></td>
</tr>
)
})
}
</table>):(<i className="fa fa-spin fa-spinner"></i>)
}
</>
)
}
export default GetExp1;

import { useEffect,useState } from "react"
import axios from "axios";
const GetExp2=()=>{
const [arr,setArr]=useState([]);

const getData=async ()=>{
const res=await axios.get(`http://localhost:9000/getAll`);
const {data}=res;
setArr(data);
}
useEffect(()=>{
getData();
},[]);
return(
<>
<h1>DISPLAY ELECTRICITY BILL CONSUMER DETAILS</h1>
<div className="container mt-5">
<table border={1}>
<thead>
<tr>
<th>CID</th>
<th>CNAME</th>
<th>CURRENT_READING</th>
<th>PRIVIOUS_READING</th>
<th>UNITS</th>
<th>SERVICE_CHARGES</th>
<th>TOTAL_BILL</th>
</tr>
</thead>
<tbody>
{
arr.map((element,index)=>{
return(
<tr key={index}>
<td>{element.cid}</td>
<td>{element.name}</td>
<td>{element.current_reading}</td>
<td>{element.previous_reading}</td>
<td>{element.units}</td>
<td>{element.service_charges}</td>
<td>{element.total_bill}</td>

</tr>
)
})
}
</tbody>
<tfoot></tfoot>
</table>
</div>
</>
)
}
export default GetExp2;

import axios from "axios";
import {useRef,useState} from "react";
const PostExp1=()=>{
const [res,setRes]=useState({});
const ref1=useRef(null);
const ref2=useRef(null);
const ref3=useRef(null);

const post_data=()=>{
postEx();
}
const postEx=async ()=>{
const res=await axios.post("http://localhost:9000/save",{"name":ref1.current.value,
"current_reading":ref2.current.value,
"previous_reading":ref3.current.value});
const {data}=res;
setRes(data);
}
return(
<>
Consumer Name: <input type="text" ref={ref1}></input> <br></br><br></br>
Current_Reading: <input type="text" ref={ref2}></input> <br></br><br></br>
Previous_Reading: <input type="text" ref={ref3}></input> <br></br><br></br>
<button onClick={post_data}>Post</button>
<p>{JSON.stringify(res)}</p>
</>
)
}
export default PostExp1;