SearchResult.tsx

SearchResult.tsx

import { useEffect, useState } from 'react';

interface Props {
  query: string;
  title: string;
}

export const BadComponent = ({ query, title }: Props) => {
  const [results, setResults] = useState<string[]>([]);
  const [capitalised, setCapitalised] = useState('');

  useEffect(() => {
    fetch(`/api/search?q=${encodeURIComponent(query)}`)
      .then(r => r.json())
      .then(setResults)
      .catch(console.error);
  }, [query, results]); 

  useEffect(() => {
    setCapitalised(title.toUpperCase());
  }, [title]);          

  return (
    <>
      <h1>{capitalised}</h1>
      <ul>
        {results.map((r, index) => <li key={index}>{r}</li>)}
      </ul>
    </>
  );
};