I would like to hide a component in react using a button onclick. The component I'd like to hide once clicked and to show once the button is clicked again is the BurgerControl.js

This is my App.js code, I was thinking a handleClick function originally.

//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;

This is the control I would like to hide and then show again

//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;

===