React関数コンポーネント-親子コンポーネント間の通信

    -->   
    -->     callback(           )

import React, {
      useState } from 'react'

const Navbar = (props) => {
     
  return (
    <div>
      Navbar-
      {
      props.myname }
      {
     /*   Navbar    ，  Sidebar      */}
      <button
        onClick={
     () => {
     
          props.onEvent()
        }}
      >  /  </button>
    </div>
  )
}

const Sidebar = () => {
     
  return (
    <div>
      Sidebar
      <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
      </ul>
    </div>
  )
}

const Child = (props) => {
     
  return (
    <div>
      Child-
      {
      props.children }
    </div>
  )
}

export default function App() {
     
  const [show, setshow] = useState(false)

  return (
    <div>
      <Navbar 
        myname="  " 
        onEvent={
     () => {
     
          console.log('      ',show)
          setshow(!show)
        }}
      />

      {
     
        show ?
        <Sidebar /> :
        null
      }

      <Child />
    </div>
  )
}