diff --git a/context-example/context-workspace/src/MemoApp.tsx b/context-example/context-workspace/src/MemoApp.tsx new file mode 100644 index 0000000..2124ea0 --- /dev/null +++ b/context-example/context-workspace/src/MemoApp.tsx @@ -0,0 +1,84 @@ +import { useEffect, useState } from "react"; +import Container from "./Container"; + +export default function MemoApp() { + const [name, setName] = useState(""); + const [plz, setPlz] = useState(""); + const [city, setCity] = useState(""); + + // PROBLEME: + // - wir wollten nicht, dass die Suche ausgeführt wird, wenn sich der Name + // geändert hat + // - das Erzeugen von 'citySearchConf' könnte sehr teuer und aufwändig sein + + const citySearchConf = { + city, + plz + }; + + return ( + +

Person

+ + + + + + + + +
+ ); +} + +type CitySearchConf = { + city: string; + plz: string; +}; + +type SearchProps = { + conf: CitySearchConf; +}; +function CitySearch({ conf }: SearchProps) { + console.log("CitySearch - searchString", conf); + + const [result, setResult] = useState([]); + + useEffect(() => { + console.log("useEffect - searchString", conf); + // in einer richtigen Anwendung würde hier ein richtiger + // API-Call ausgelöst... + + const searchResult = doSearch(conf.plz + conf.city); + + setResult(searchResult); + }, [conf]); + + return ( + + + + ); +} + +// "Simulation" eines echten Api Calls +function doSearch(searchString: string): string[] { + return [ + "found-01-for-" + searchString, + "found-02-for-" + searchString, + "found-03-for-" + searchString + ]; +}