react Searching

//imp:javascript - A component is changing an uncontrolled input of type text to be controlled error in ReactJS - Stack Overflow

 

import React,{useState,useEffect} from 'react'

import axios from 'axios';

export default function Search() {

    const [id,setId]=useState();

    const [data,setData]=useState({});//update 

    useEffect(() => {

        const loadData = async () => {

            try {

           

                let res = await axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`);

                // console.log(res.data);

                setData(res.data);//usestate

                // console.log(data);

               

            }

            catch (err) {

                console.log(err);

            }

        }

    if(id>=1){

        loadData();

    }

    return () => setData('');

    }

        //     fetch('https://jsonplaceholder.typicode.com/posts')

        //     .then(res=>res.json().then(d=>{console.log(d);

        //     setPost(d)

        //     // console.log(d[0].title);

        // // setPost(d[0].title)    

        // }

        //     ))

        //     .

        //     catch(err=>console.log(err));

       

        , [id])

  return (

    <div>

<input type="text" name="" id="" value={id||''}

  onChange={(e) => setId(e.target.value)}

/>

<button>search</button>

<br />

{data?data.title:''}

    </div>

  )

}