How to change the state of one component in another?

There here is such a "project".While that is not styled anything
Trying to implement something like "click on the flag top menu(where button is) will be displayed,otherwise hidden" .This code turned out like this
import React{Component} from 'react'
ShowFlag import from './ShowFlag'
WeatherPage import from "./WeatherPage";

ShowFlagsList class extends Component{

 openWeatherPage: <WeatherPage style={{display:'none'}}/>
 //define the initial state of our component

 const {flags}=this.props
 /*for all elements of an object (flags) use the function map,which will return each element of the flag
 with the new layout
 const (flag=>
 <ShowFlag flag={flag}, key={} className={ShowFlagsList} onClick={this.swapComponents} />
the <ul>
 openWeatherPage: <WeatherPage style={{display:'block'}}/>


export default ShowFlagsList

where WeatherPage-the same element that you want to display-hide,and ShowFlagList component flags.
This code makes absolutely no result.I'm a novice in Reacte ,therefore I have no ideas,except changing the status to resolve this problem.
March 23rd 20 at 19:02
1 answer
March 23rd 20 at 19:04
import React { useState, useCallback } from 'react';
WeatherPage import from './WeatherPage';
import Flag from './Flag';

const FlagsList = ({ onItemClick, flagsList }) => (
the <ul>
 { => <Flag key={} flag={flag} onClick={onItemClick} />)}

const Example = () => {
 const [shouldShowWeather, setShouldShowWeather] = useState(false);
 const toggleShowWeather = useCallback(() => {
 setShouldShowWeather(state => !state);
 }, []);

 return (
 {shouldShowWeather && <WeatherPage />}
 <FlagsList flagsList={flagsList} onItemClick={toggleShowWeather} />

We strongly recommend to study the documentation of the library and go through the tutorial.

Find more questions by tags React