Komponenty react - uporzątkowanie kodu

Question

import React, { useState } from 'react';

import { fetchWeather } from './api/fetchWeather';
import './App.css';

const App = () => {
    const [query, setQuery] = useState('');
    const [weather, setWeather] = useState({});

    const search = async (e) => {
        if(e.key === 'Enter') {
            const data = await fetchWeather(query);
            setWeather(data);
        }
    }

    return (
        <div className="main-container">
            <input type="text"
                className="search"
                placeholder="Search..."
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                onKeyPress={search}
            />
            {weather.main && (
            <div className="city">
                <h2 className="city-name">
                    <span>{weather.name}</span>
                    <sup>{weather.sys.country}</sup>
                </h2>

                <div className="city-temp">
                    {Math.round(weather.main.temp)}
                    <sup>&deg;C</sup>
                </div>
                <div className="info">
                    <img className="city-icon" src={`https://openweathermap.org/img/wn/${weather.weather[0].icon}@2x.png`} alt={weather.weather[0].description} />
                    <p>{weather.weather[0].description}</p>
                </div>
            </div>
            )}
        </div>
    );
}
export default App;

Witam, czy jest jakiś sposób żeby utworzyć z  inputa i div city  komponenty? Próbowałam już to zrobic ale problem jest z funkcja search, gdy ją przeniosę nie wszystkie zmienne są wykorzystywane. Jestem początkująca w react js. Z góry dzięki za pomoc ;) 

Answer 1

Co dokładnie masz na myśli przez "nie wszystkie zmienne są wykorzystywane" ?

Comments

import React, { useState } from 'react';

import { fetchWeather } from './api/fetchWeather';

const SearchInput = () => {
    const [query, setQuery] = useState('');
    const [weather, setWeather] = useState({});

    const search = async (e) => {
        if(e.key === 'Enter') {
            const data = await fetchWeather(query);
            setWeather(data);
        }
    }

    return (
        <input type="text"
                className="search"
                placeholder="Search..."
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                onKeyPress={search}
            />
    )
    
}
export default SearchInput;

To, że gdy przeniosę np, właśnie input to wyskakują błędy, że weather jest zdefiniowane a nie jest nigdzie wykorzystywane

---

Moim zdaniem niepotrzebnie przenosisz funkcję serach do komponentu SearchInput. Powinnaś ją zostawić w komponencie App i przekazać ją w propsach. Tutaj masz przykład jak to się robi.