Chap05 -> Using query parameters -> 6. Invoke search when component first renders and when the search variable changes using the useEffect hook

QandA/frontend/src/SearchPage.tsx

@@ -10,6 +10,15 @@ import { searchQuestions, QuestionData } from './QuestionsData';
 
 export const SearchPage = () => {
   const [searchParams] = useSearchParams();
+  const [questions, setQuestions] = React.useState<QuestionData[]>([]);
+  const search = searchParams.get('criteria') || '';
+  React.useEffect(() => {
+    const doSearch = async (criteria: string) => {
+      const foundResults = await searchQuestions(criteria);
+      setQuestions(foundResults);
+    };
+    doSearch(search);
+  }, [search]);
 
   return <Page title="Search Results">{null}</Page>;
 };