Me gustaría ocultar un componente en reaccionar usando un botón al hacer clic. El componente que me gustaría ocultar una vez que se hace clic y mostrar una vez que se vuelve a hacer clic en el botón es BurgerControl.js

Este es mi código App.js, originalmente estaba pensando en una función handleClick.

 //App.js import React from "react"; import "./App.css"; import Burger from "../Burger/Burger"; import axios from "axios"; class App extends React.Component { state = { burgerLayers: [], }; componentDidMount() { axios.get("/burgerLayers").then((res) => this.setState({ burgerLayers: res.data.burgerLayers, }) ); } componentDidUpdate() { axios.post("/burgerLayers", { burgerLayers: this.state.burgerLayers, }); } addLayer = (layer) => { const burgerLayers = this.state.burgerLayers; this.setState({ burgerLayers: [...burgerLayers, layer], }); }; removeLayer = (indexOfLayerClicked) => { let { burgerLayers } = this.state; burgerLayers = burgerLayers.filter((layer, i) => i !== indexOfLayerClicked); this.setState({ burgerLayers }); }; deleteBurger = () => { let emptyArry = []; this.setState({ burgerLayers: emptyArry, }); }; buntifulBurger = () => { let buns = [ "bunTop", "bunTop", "bunTop", "bunTop", "bunTop", "bunTop", "bunTop", ]; this.setState({ burgerLayers: buns, }); }; render() { return ( <div className="App"> <Burger burgerLayers={this.state.burgerLayers} addLayer={this.addLayer} removeLayer={this.removeLayer} deleteBurger={this.deleteBurger} buntifulBurger={this.buntifulBurger} handleClick={this.handleClick} /> </div> ); } } export default App;

Este es el control que me gustaría ocultar y luego volver a mostrar

 //BurgerControls.js import { layerImages, layerNames } from "./layerImages"; function BurgerControls({ addLayer }) { return ( <div className="controls"> {layerNames.map((layer, i) => ( <button key={i} onClick={() => addLayer(layer)}> <img src={layerImages[layer]} alt="" /> </button> ))} </div> ); } export default BurgerControls;

===