Essayer de mapper un tableau d'objets de manière conditionnelle

J'essaie de rendre conditionnellement du contenu sur un écran. Fondamentalement, j'ai un tableau de 3 objets avec des sous-objets. Cet objet principal est stocké dans mon réducteur comme état initial (il s'agit de données factices). J'ai une barre Sidenav qui contient des liens et je souhaite afficher du contenu sur le côté droit de la navigation latérale. J'utilise un sidenav personnalisé, donc cela peut sembler un peu déroutant, mais mon problème est que je dois en quelque sorte mapper ce tableau de 3 objets afin que je puisse rendre chaque objet en fonction du lien sur lequel l'utilisateur clique. Je publierai la partie de l'objet que je regarde (j'ai en fait posté une question à ce sujet plus tôt si vous voulez voir l'objet entier). Je suis jr. dev donc je suis sûr que ce n'est pas quelque chose de trop complexe.

const initialState = {
  menu: {
        title: "Menu title",
        description: "Menu description",
        products: {
          title: "Products title",
          description: "Product description",
          product: [
            {
              device: {
                title: "Device title",
                description: "Device description",
                types: [
                  {
                    name: "Modem",
                    title: "Modem title",
                    description: "Modem description"
                  },
                  {
                    name: "charger",
                    title: "charger title",
                    description: "charger description"
                  }
                ]
              }
            },
            {
              laptop: {
                title: "Laptop title",
                description: "Laptop description",
                types: [
                  {
                    name: "Apple",
                    title: "Apple title",
                    description: "Apple description"
                  },
                  {
                    name: "Lenevo",
                    title: "Lenevo title",
                    description: "Lenevo description"
                  }
                ]
              }
            },
            {
              mobile: {
                title: "Mobile title",
                description: "Mobile description",
                types: [
                  {
                    name: "Samsung",
                    title: "Samsung title",
                    description: "Samsung description"
                  },
                  {
                    name: "Nokia",
                    title: "Nokia title",
                    description: "Nokia description"
                  }
                ]
              }
            }
          ]
        }
      }
};

et voici l'objet avec lequel je travaille via le réducteur

import React, { Component } from 'react';
import { connect } from 'react-redux';
import ReduxBurgerMenu from '../components/Menu';
import Chosen from '../components/Chosen';

class ExampleMenu extends Component {

  onClickDevices = (props) => {
    let devices = this.props.product;
    console.log(devices)
  }

  onClickLaptops = (props) => {
    let laptops = this.props.product[1];
    console.log(laptops)
  }

  onClickMobile = (props) => {
    let mobile = this.props.product[2];
    console.log(mobile)
  }

  onClickAny = (props) => {
    let devices = this.props.product;
    devices.map(obj => {
      return Object.keys(obj).map(key => {
        return (
          <tr>
            <td>{key}</td>
            <td>{obj[key]}</td>
          </tr>
        )
      })
    })
  }

    render () {
        let first = Object.keys(this.props.menu.products)[0];
        let second = Object.keys(this.props.menu.products)[1];

        return (
            <ReduxBurgerMenu isOpen={ this.props.isOpen }>
                <a href="javascript:void(0)">{this.props.menu.title}</a>
                <a href="javascript:void(0)">{this.props.menu.description}</a>
                <a href="javascript:void(0)">{first}</a>
                <a href="javascript:void(0)">{second}</a>
                <button onClick={this.onClickDevices} id="Devices" className="menu-item" href="/">Devices</button>
                <button onClick={this.onClickAny} id="Laptop" className="menu-item" href="/laptops">{}</button>
                <button onClick={this.onClickMobile} id="Mobile" className="menu-item" href="/mobile">Mobile</button>
                <Chosen />
            </ReduxBurgerMenu>
        );
    }
}

// {JSON.stringify(this.props.products)}

const mapStateToProps = state => {
  return {
    menu: state.reducer.menu,
    product: state.reducer.menu.products.product
  }
}

export default connect(mapStateToProps)(ExampleMenu);

Le tableau de produits avec les 3 objets est ce que Je faisais référence à. J'ai aussi quelques fonctions aléatoires juste pour voir si j'obtenais les données ou non avec console.logs, mais idéalement, je veux utiliser cette fonction onClickAny pour rendre l'un des trois objets du côté droit (peut-être dans une liste) en fonction de si quelqu'un a cliqué sur les boutons des appareils, du mobile ou de l'ordinateur portable. S'il vous plaît, toute aide serait grandement appréciée!