form search
import React ,{useState,useEffect} from 'react'
import axios from 'axios'
export default function FormApi() {
const[post,setPost]=useState({});
const [id,setid]=useState(1);
const [idbuttonclick,setidbuttonclick]=useState(1);
const handleclick=()=>{
//alert(id);
setidbuttonclick(id);
}
useEffect(
()=>{
axios.get(`https://jsonplaceholder.typicode.com/posts/${idbuttonclick}`).then(res=>{
console.log(res)
setPost(res.data);
}).catch(err=>console.log(err))
},[idbuttonclick]
)
return (
<div>
<input type="text"
value={id}
onChange={
e=>setid(e.target.value)
}
/>
<button onClick={handleclick}>click</button>
{post.title}
{post.id}
<h1>{post.body}</h1>
</div>
)
}
/........................./
import React,{useState,useEffect} from 'react'
import axios from 'axios';
export default function FormSearch() {
const [id,setId]=useState(1);
const [post,setPost]=useState({});
const [idbuttonclick,setIdbuttonclick]=useState();
// const handlechange=(e)=>{
// setId(e.target.value);
// }
const handleclick=()=>{
setIdbuttonclick(id);
}
useEffect(()=>{
const getData=async()=>{
try{
const res=await axios.get(`https://jsonplaceholder.typicode.com/posts/${idbuttonclick}`)
console.log(res.data)
setPost(res.data);
}
catch(err)
{console.log(err)
}
}
if(idbuttonclick>=1){
getData();
}
},[idbuttonclick])
return (
<div>
{/* {id} */}
<input type="text" value={id} onChange={e=>setId(e.target.value)} />
{post.title}
<button onClick={handleclick}>search</button>
</div>
)
}
Comments
Post a Comment