Как изменить состояние одного компонента в другом?

Question

[thistlemr11]

Есть вот такой вот "проект".Пока что не стилизирован,ничего
Пытаюсь реализовать что-то типо "по клику на флаг верхняя менюшка(там,где кнопка) будет отображаться,иначе скрыта" .Код этого получился примерно такой

import React,{Component} from 'react'
import ShowFlag from './ShowFlag'
import WeatherPage from "./WeatherPage";




class ShowFlagsList extends Component{

    render(){
        this.state={
            openWeatherPage: <WeatherPage style={{display:'none'}}/>
        };
        //указываем начальное состояние нашего компонента

        const {flags}=this.props
        /*для всех элементов объекта (flags) применяем функцию мап,которая вернёт каждый элемент flag
        с новой разметкой
         */
        const flagList=flags.map (flag=>
             <ShowFlag flag={flag} key={flag.id} className={ShowFlagsList} onClick={this.swapComponents} />
        )
        return(
            <ul>
                {flagList}
            </ul>
        )
    }
    swapComponents=()=>{
        this.setState({
            openWeatherPage: <WeatherPage style={{display:'block'}}/>

        })
    }
}

export default ShowFlagsList

,где WeatherPage-тот самый элемент,который нужно отображать-скрывать,а ShowFlagList-компонент с флагами.
Данный код не даёт абсолютно никакого результата.Я новичёк в Реакте ,посему у меня нет никаких идей,кроме как смены состояния для решения данной проблемы.

Comments

[Yustas Alexu]

У вас отсутствуют базовые знания реакта. Стейт не объявляется внутри рендера.

Answer 1

[Антон Спирин]

import React, { useState, useCallback } from 'react';
import WeatherPage from './WeatherPage';
import Flag from './Flag';

const FlagsList = ({ onItemClick, flagsList }) => (
  <ul>
    {flagsList.map(flag => <Flag key={flag.id} flag={flag} onClick={onItemClick} />)}
  </ul>
);

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

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

Настоятельно рекомендую изучить документацию библиотеки и пройти туториал.