【React】子コンポーネントから親コンポーネントにデータを渡す方法

「はじめてつくるReactアプリ HTMLとCSSの知識だけで始められるReact開発！（React入門）」で勉強しています。

// App.tsx
const App = () => {
    const [city, setCity] = useState<string>('');

    const getWeather = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        fetch(`http://api.weatherapi.com/v1/current.json?key=XXX&q=${city}&aqi=no`)
            .then(res => res.json())
            .then(data => setResults({
                country: data.location.country,
                cityName: data.location.name,
                temperature: data.current.temp_c,
                conditionText: data.current.condition.text,
                icon: data.current.condition.icon
            }))
    }

    const [results, setResults] = useState<Results>({
        country: "",
        cityName: "",
        temperature: "", 
        conditionText: "",
        icon: ""
    })

    return (
        <div>
            <Title />
            <Form setCity={setCity} getWeather={getWeather} />
            <Results results={results} />
        </div>
    )
}

FormコンポーネントにsetCityとgetWeatherを渡します。

それをFormコンポーネントでpropsとして受け取る。

// Form.tsx
type FormProps = {
    setCity: React.Dispatch<React.SetStateAction<string>>;
    getWeather: (e: React.FormEvent<HTMLFormElement>) => void;
}

const Form = (props: FormProps) => {
    return (
        <form onSubmit={props.getWeather}>
            <input
                type="text"
                name="city"
                placeholder="都市名"
                onChange={(e) => props.setCity(e.target.value)}
            />
            <button
                type="submit"
            >
                Get Weather
            </button>
        </form>
    )
}

これで、Formコンポーネントで送信したデータを親のApp.tsxで受け取り、Resultsコンポーネント渡して結果を表示できるようになりました👏
（getWeather関数の中でsetResultsしている）