How to receive data in form from another component

Hello everyone, I'm building a react weather app where users are allowed to enter their city name and the weather info is displayed back to the user. The problem is, I've got the input and button in a form, and I want to receive data from another component called WeatherApp. how do I link the two components the formcomponent 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; and the weatherappcomponent 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.json?key=95f0ddb3a06a4a358cf223933242311&q=${query}&days=10&aqi=yes&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;

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.json?key=95f0ddb3a06a4a358cf223933242311&q=${query}&days=10&aqi=yes&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;

Related Posts

Introducing EAS Hosting: Simplified deployment for mode...

Jan 14, 2025

Performance discovery: IOPS vs. IOPS

Jan 14, 2025

Speaking at New York C++ meetup on January 13

Jan 14, 2025