Как получить данные в форме из другого компонента в ReactJS ⇐ Javascript

[Anonymous]

Я создаю приложение для реагирования на погоду, в котором пользователям разрешено вводить название своего города, и информация о погоде отображается пользователю.
Проблема в том, что у меня есть ввод и кнопка в форме, и я хочу получать данные от другого компонента под названием WeatherApp. Я хочу, чтобы пользователь мог ввести свой город и получить информацию о погоде с помощью формы.
как связать два компонента
компонент формы
import '../App.css';
import Input from './Input';
import Button from './Button';
import { useState } from 'react';

const Form = ({handleQueryChange}) => {
const [city, setCity] = useState('')

const handleChange = (e) => {
setCity(e.target.value)

}

const handleSubmit = (e) => {
e.preventDefault();
handleQueryChange(city);

}

return (






);
}

export default Form;

компонент приложения погоды
import React from 'react';
import { BrowserRouter, Routes,Route } from 'react-router-dom';
import { useState, useEffect } from 'react';
import { WiDaySunny,WiCloud, WiNightCloudy,WiHumidity, WiNightClear } from 'react-icons/wi';
import Layout from './Layout';
import Home from './Home';
import Minutecast from './Minutecast';
import Hourly from './Hourly';
import Today from './Today';
import '../App.css';

const WeatherApp = () => {
const [data, setData] = useState([]);
const [query, setQuery] = useState('Accra');

const handleQueryChange = (data) => {
setQuery(data.location.name);

}

const getWeatherIcons = (description) =>{
switch(description.toLowerCase()) {
case 'sunny':
return ;
case 'cloud':
return ;
case 'clear':
return ;
case 'partly cloudy':

return ;
default:
return ;

}
}

const convertToWhole = (tem) =>{
const whole = Math.trunc(tem);
return whole;

}

useEffect(()=>{

const fetchWeatherData = async () => {
try {
const response = await fetch(`https://api.weatherapi.com/v1/forecast. ... &alerts=no`);
const result = await response.json();
setData(result);

console.log(result);
} catch (error) {
console.error("Error fetching weather data:", error);
}

};
fetchWeatherData();
}, [data]);

return (

{/* */}


}>









)

}

export default WeatherApp;


Подробнее здесь: https://stackoverflow.com/questions/793 ... in-reactjs