Search.jsx

import React, { useState, useCallback } from 'react';

function Search() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  
  const queryChangeHandler = useCallback(e => {
    setQuery(e.target.value); // set query string on input change
  }, []);
  
  const submitHandler = useCallback(e => {
    e.preventDefault(); // prevent page refresh on submit
    
    async function fetchArticles() {
      const res = await fetch(`${process.env.API_URL}/search?q=${query}`);
      const body = await res.json();
      setResults(body);
    }
    
    fetchArticles();
  }, [query]);
  
  return (
    <div>
      <form onSubmit={submitHandler}>
        <input
          type="text"
          name="query"
          value={query}
          onChange={queryChangeHandler}
        />
        <input type="submit" value="Search" />
      </form>
      <ul>
      {
        results.map(item => {
          return (
            <li key={item.id}>
              <article>
                <h1>{item.title}</h1>
                <span>{item.author}</span>
              </article>
            </li>
          )
        })
      }
      </ul>
    </div>
  )
}

export default Search;