Estoy tratando de representar un componente diferente en mi App.js basado en un OnClick colocado en un botón anidado dentro de mi componente Inicio. Esencialmente, quiero que el componente Inicio se represente inicialmente y luego mi componente "Restaurantes" lo reemplace cuando haga clic en el botón "Explorar restaurantes" (que cambia el estado de verdadero a falso) que está anidado en mi componente Inicio. Soy nuevo en reaccionar, así que estoy seguro de que hay una manera fácil de hacerlo, pero me siento un poco perdido.

 Here is the code **App.js:** import React, {useState} from "react"; import './App.css'; import Home from "./home" import Footer from "./footer" import Header from "./header" import Resturants from "./resturants"; function App() { var [count, setCount] = useState(false); return ( <div> <Header/> {count ? <Home /> : <Resturants/> } <Footer/> </div> ); } export default App; **Home.js** import React, {useState} from "react"; import Button from "./button"; import {Stack} from "react-bootstrap"; import Promotions from './promotions' //This component purely renders the home page when the user opens the app. function Home (){ function changePage (){ setCount(count = true) } return ( <Stack> <Promotions /> <Button className ="homeButtons" buttonText="Login" /> <Button className ="homeButtons" buttonText="Signup" /> <Button onClick ={changePage} className ="homeButtons" buttonText="Explore Resturants" /> </Stack> ) } export default Home **Button.js** import React from "react" function Button (props){ return (<button onClick={props.onClick} style={props.style} className ={props.className} type = {props.type}> {props.buttonText} </button> ) } export default Button