455
Suscriptores
Sin datos24 horas
Sin datos7 días
+230 días
Archivo de publicaciones
455
import axios from "axios";
import {useRef,useState} from "react";
const PutEx1=()=>{
const [res,setRes]=useState({});
const ref1=useRef(null);
const ref2=useRef(null);
const put_data=()=>{
putEx();
}
const putEx=async ()=>{
const res=await axios.put("https://reqres.in/api/users/2",{"name":ref1.current.value,"job":ref2.current.value});
const {data}=res;
setRes(data);
}
return(
<>
<input type="text" ref={ref1}></input> <br></br><br></br>
<input type="text" ref={ref2}></input> <br></br><br></br>
<button onClick={put_data}>Post</button>
<p>{JSON.stringify(res)}</p>
</>
)
}
export default PutEx1;
455
import axios from "axios";
import {useRef,useState} from "react";
const PostEx1=()=>{
const [res,setRes]=useState({});
const ref1=useRef(null);
const ref2=useRef(null);
const post_data=()=>{
postEx();
}
const postEx=async ()=>{
const res=await axios.post("https://reqres.in/api/register",{"email":ref1.current.value,"password":ref2.current.value});
const {data}=res;
setRes(data);
}
return(
<>
<input type="email" ref={ref1}></input> <br></br><br></br>
<input type="password" ref={ref2}></input> <br></br><br></br>
<button onClick={post_data}>Post</button>
<p>{JSON.stringify(res)}</p>
</>
)
}
export default PostEx1;
455
import { useEffect,useState } from "react"
import axios from "axios";
const GetEx3=()=>{
const [arr,setArr]=useState([]);
const getData=async ()=>{
const res=await axios.get("http://localhost:2000/getAll");
const {data}=res;
setArr(data);
}
useEffect(()=>{
getData();
},[]);
return(
<>
<div className="container mt-5">
<table className="table table-success table-bordered table-striped table-hover">
<thead>
<tr>
<th>id</th>
<th>isbn</th>
<th>title</th>
<th>author</th>
<th>status</th>
<th>price</th>
</tr>
</thead>
<tbody>
{
arr.map((element,index)=>{
return(
<tr key={index}>
<td>{element.id}</td>
<td>{element.isbn}</td>
<td>{element.title}</td>
<td>{element.author}</td>
<td>{element.status}</td>
<td>{element.price}</td>
</tr>
)
})
}
</tbody>
<tfoot></tfoot>
</table>
</div>
</>
)
}
export default GetEx3;
455
import { useRef,useState } from "react";
import axios from "axios";
const GetEx2=()=>{
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 GetEx2;455
import { useRef,useState } from "react";
import axios from "axios";
const GetEx2=()=>{
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 GetEx2;455
import axios from "axios";
import { useEffect,useState } from "react";
const GetEx1=()=>{
const [arr,setArr]=useState([]);
const getData=async ()=>{
try{
const res=await axios.get("https://www.w3schools.com/angular/customers.php");
const {data}=res;
const {records}=data;
setArr(records);
}catch(err){
console.log(err);
}
}
useEffect(()=>{
getData();
},[]);
return(
<>
{
arr.length!=0?
(<table border={1}
align="center"
cellSpacing={10}
cellPadding={10}>
<tr>
<th>Name</th>
<th>City</th>
<th>Country</th>
</tr>
{
arr.map((element,index)=>{
return(
<tr key={index}>
<td>{element.Name}</td>
<td>{element.City}</td>
<td>{element.Country}</td>
</tr>
)
})
}
</table>)
:(<i className="fa fa-spin fa-spinner"></i>)
}
</>
)
}
export default GetEx1;
455
import axios from "axios";
import { useEffect,useState } from "react";
const GetEx1=()=>{
const [arr,setArr]=useState([]);
const getData=async ()=>{
try{
const res=await axios.get("https://www.w3schools.com/angular/customers.php");
const {data}=res;
const {records}=data;
setArr(records);
}catch(err){
console.log(err);
}
}
useEffect(()=>{
getData();
},[]);
return(
<>
{
arr.length!=0?(<p style={{color:"red"}}>{JSON.stringify(arr)}</p>):(<i className="fa fa-spin fa-spinner"></i>)
}
</>
)
}
export default GetEx1;
