How to hide these elements before the user uses the search - reactjs

Question

There is a Main component, which has 4 separate components. It is necessary that these components are not visible before the user does not use the search.
The first component is responsible for displaying the weather graph, and the second for displaying the map. I do not know how to hide these two components specifically.
first component 1
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;
second component 2
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 OpenStreetMap 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;

Answer 1

You can achieve that by passing down a prop
For instance
return (
<>
<div className="main-container">
{prop.visible ?
<CardWeather />
<Forecast/>
<WeatherGrapth/>
<WeatherMap/>
: ""
}
</div>
<div className="pr">weather app</div>
</>
)
}
export default Main;```
So to make it visible just pass in
```visible={true} ```
when calling the function