如何在Reactjs的菜单内设置onClick函数？

Question

如果这是一个愚蠢/显而易见的问题，我是Javascript / React的新手。我正在尝试创建一个菜单，该菜单填充了从API调用中获取的JSON对象。由于JSON数据是一堆嵌套的对象（我说的是数百个对象），因此我想出了如何递归调用这些对象并使它们显示在无序列表中的方法。我似乎无法弄清楚如何添加一个onClick函数，当单击该函数时，它将在嵌套对象中向下显示下一层。

我将提供一些屏幕截图，让您大致了解我所拥有的以及我想要达到的目标。递归部分让我迷上了如何使它工作的方法。有人有想法吗？

class Menu extends React.Component {

  state = {

    categories: []

  };

  makeMenuLayer = layer => {

    const layerKeys = Object.entries(layer).map(([key, value]) => (

      <ul>

        {key}

        {this.makeMenuLayer(value)}

      </ul>

    ));

    return <div>{layerKeys}</div>;

  };

  componentDidMount() {

    axios.get("https://www.ifixit.com/api/2.0/categories").then(response => {

      this.setState({ categories: response.data });

    });

  }

  render() {

    const { categories } = this.state;

    return <div>{this.makeMenuLayer(categories)}</div>;

  }

}

这是此代码当前显示的内容。我正在尝试使其仅显示对象的第一层，然后在单击每个元素时显示下一级。例如，如果我单击“服装”，则显示“附件”，“服装”，“眼镜”等；如果单击“附件”，则将显示“领带”和“雨伞”。

这是控制台中显示的我正在使用的数据的屏幕截图