Использование кнопки в одном компоненте для рендеринга другого компонента в основном (App) компоненте

Question

Я пытаюсь отобразить / скрыть один компонент ItemMain, который импортируется в основной компонент приложения с помощью кнопки в другом компоненте NavLogoNew. Я пытался сделать это разными способами, но похоже, что кнопка не знает, нажата ли она, когда я вручную изменяю значение true / false, это работает. В Интернете я нашел много материала о ситуациях, когда задействованы только два компонента, но ничего подобного. Мой код:

Приложение

import React from 'react';
import './App.css';
import { tsPropertySignature } from '@babel/types';
import { statement } from '@babel/template';

import NavBar from './../Components/Navigation/NavBar/NavBar.js';
import ItemMain from './../Components/Item/ItemMain/ItemMain.js';
import ItemList from './../Components/Item/ItemList/ItemList.js';
import NavButtonTop from './../Components/Navigation/NavButton/NavButtonTop/NavButtonTop.js';
import NavLogoNew from './../Components/Navigation/NavButton/NavButtonNew/NavLogoNew.js';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({
      visible: !this.visible
    })
  }     

  render() {
    return (
      <div className="App">
        <NavBar />
        {this.state.visible ? <ItemMain /> : null}
        <ItemList />
        <NavButtonTop name='UP'/>
      </div>
    );
  }
}


export default App;

NavLogoNew:

import React from 'react';
import './NavLogoNew.css';
import ItemMain from './../../../Item/ItemMain/ItemMain.js'


class NavLogoNew extends React.Component {
    render() {
        return (    
            <button 
                className='NavLogoNew'
                onClick={this.props.click}  
            >
                {this.props.name}  
            </button>
        );
    }
}

export default NavLogoNew;

Answer 1

В вашей функции handleClick чего-то не хватает
используйте !this.state.visible, поэтому измените значение с

handleClick(){
    this.setState({
      visible: !this.visible
    })
  }

на

 handleClick = () => {
    this.setState({
      visible: !this.state.visible
    })
  }

и передайте функцию handleClick в NavLogoNew следующим образом

<NavLogoNew onClick = {this.handleClick} />

внутри компонента NavLogoNew вы должны вызывать его следующим образом

class NavLogoNew extends React.Component {
    render() {
        return (    
            <button 
                className='NavLogoNew'
                onClick={() => this.props.onClick()}  
            >
                {this.props.name}  
            </button>
        );
    }
}