apiFetch1

js

import logo from './logo.svg';
import './App.css';
import Axios from 'axios'
import React, { useEffect, useState } from 'react';

function App() {
  
  const [data, setData] = useState([])
  const [search, setSearch] = useState('')
  const [query, setQuery] = useState('')

  useEffect(() => {
    fetchData()
  }, [query])

  const fetchData = async () => {
    await Axios.get(`https://hn.algolia.com/api/v1/search_by_date?query=${query}`)
    .then(response =>  setData(response.data.hits))
    .catch(error => console.log(error))
  }

  const queryData = (e) => {
    e.preventDefault()
    setQuery(search)
  }

  console.log(search)
  return (
    <div>
      <form onSubmit={queryData} >
        <input type='text' onChange={(e) => setSearch(e.target.value)} />
        <button type='submit'>
          Search
        </button>
      </form>
      {data.map(e => (
        <>
          <h1>{e.story_title}</h1>
          <a  target="_blank" href={e.story_url}>{e.story_title}</a>
        </>
      ))}
    </div>
  );
}

export default App;