Я создаю приложение для реагирования на погоду, в котором пользователям разрешено вводить название своего города, и информация о погоде отображается пользователю.
Проблема в том, что у меня есть ввод и кнопка в форме, и я хочу получать данные от другого компонента под названием 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
