问如何在用户使用搜索之前隐藏这些元素

EN

import React, { useContext, useState, useEffect } from 'react';
import Chart from 'react-apexcharts';
import { Context } from '../../contex';
import './weather-graph.scss';
import { useTranslation } from 'react-i18next';
const WeatherGrapth = () => {
    const { t } = useTranslation()
    const {dailyForecast} = useContext(Context);

    const [category, setCategory] = useState([])
    const [data, setData] = useState([])

    useEffect(() => {
        const day = [];
        const temp =[];
        dailyForecast.forEach((d) => {
        const unixTimestamp = d.dt;
        const getTemp = Math.round(d.temp.day)
        let getDay = new Date(unixTimestamp * 1000).getDate();
            day.push(getDay)
            temp.push(getTemp)
        })
        setCategory(day)
        setData(temp)
      }, [dailyForecast]); 

    return(
        <>
        {dailyForecast.temp && 
            <div className="graph__container">
                <h3 className="graph__title">{t("weekly_foreacst")}</h3>
                <Chart options={{
                        chart: {
                            id: 'weather-graph'
                        },
                        xaxis: {
                            categories: category, 
                            title: {
                                text:  [t("date")],
                            },
                    },
                    yaxis: {
                        title: {
                            text:  [t("temperature")],
                        },
                    },
                    }} 
                    series={[{
                        name: 'temp',
                        data: data
                    }]} type="line" height={'349px'} />
        </div>
        }
        
        </>
    )
}

export default WeatherGrapth;

import React, { useEffect }  from 'react';
import './weather-map.scss';
import {API_KEY} from './../../apis/config';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import 'leaflet-openweathermap/leaflet-openweathermap.css';
import 'leaflet-openweathermap';
import { useTranslation } from 'react-i18next';

const WeatherMap = () => {
        const { t } = useTranslation();

    useEffect(() => {
        const osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 18, attribution: 'copyright <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' });
        
        const clouds = L.OWM.clouds({showLegend: false, opacity: 0.5, appId: `${API_KEY}`});
        const cloudscls = L.OWM.cloudsClassic({showLegend: false,appId: `${API_KEY}`});
        const precipitation = L.OWM.precipitation({showLegend: false, appId: `${API_KEY}`});
        const precipitationcls = L.OWM.precipitationClassic({showLegend: false,appId: `${API_KEY}`});
        const rain = L.OWM.rain({showLegend: false,appId: `${API_KEY}`});
        const raincls = L.OWM.rainClassic({showLegend: false,appId: `${API_KEY}`});
        const snow = L.OWM.snow({showLegend: false,appId: `${API_KEY}`});
        const pressure = L.OWM.pressure({showLegend: false,appId: `${API_KEY}`});
        const pressurecntr = L.OWM.pressureContour({showLegend: false,appId: `${API_KEY}`});
        const temp = L.OWM.temperature({showLegend: false,appId: `${API_KEY}`});
        const wind = L.OWM.wind({showLegend: false,appId: `${API_KEY}`});
        const map = L.map('map', { center: new L.LatLng(53.9,  27.5667), zoom: 5, layers: [osm] });
        const baseMaps = { "OSM Standard": osm };
        const overlayMaps = {
            [t("clouds")]: clouds,
            [t('cloudscls')]: cloudscls,
            [t('precipitation')]: precipitation,
            [t('precipitationcls')]: precipitationcls,
            [t('rain')]: rain,
            [t('raincls')]: raincls,
            [t('snow')]: snow,
            [t('pressure')]: pressure,
            [t('pressurecntr')]: pressurecntr,
            [t('temp')]: temp,
            [t('wind')]: wind,
        };
        const layerControl = L.control.layers(baseMaps, overlayMaps,{collapsed:window.innerWidth < 768}).addTo(map);
    }, []);
    
    return(
         <div className="weathermap-container"> 
         <div id="map" style={{height: '260pt', borderRadius:'20px'}} className="map-weather"></div>
        </div> 
    )
}
export default WeatherMap;