DEV Community

Azongo Ismail
Azongo Ismail

Posted on

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 (  
    <div>
        <form className="inputForm" onSubmit={handleSubmit}>
       <Input value={city} onChange={handleChange} />
       <Button/>
        </form>

    </div>);
}

export default Form;



Enter fullscreen mode Exit fullscreen mode

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 <WiDaySunny size='100px'/>;
        case 'cloud':
                return <WiCloud  size='100px'/>;
        case 'clear':
                return <WiNightClear size='100px'/>;
        case 'partly cloudy':

                return <WiNightCloudy size='150px' color='blue' />;
        default:
                return <WiDaySunny color='red' size='100px' />;

    }
}

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 ( <>
    <div className="formContainer">
    {/* <Form onSubmit={handleQueryChange} /> */}
    </div>
    <BrowserRouter>
    <Routes>
       <Route path ='/'  element={< Layout />}>
       <Route index element={<Home  data={data} getWeatherIcons={getWeatherIcons} convertToWhole={convertToWhole}/>} />
       <Route path='minutecast' element={<Minutecast />}/>
       <Route path='hourly' element={<Hourly data={data} convertToWhole={convertToWhole}/>}/>
       <Route path='today'element={<Today data={data} />}/>
     </Route>
     </Routes>
   </BrowserRouter>

    </>
    )

}

export default WeatherApp;
Enter fullscreen mode Exit fullscreen mode

Image of AssemblyAI tool

Challenge Submission: SpeechCraft - AI-Powered Speech Analysis for Better Communication

SpeechCraft is an advanced real-time speech analytics platform that transforms spoken words into actionable insights. Using cutting-edge AI technology from AssemblyAI, it provides instant transcription while analyzing multiple dimensions of speech performance.

Read full post

Top comments (0)

nextjs tutorial video

📺 Youtube Tutorial Series

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay