Я пытаюсь условно визуализировать некоторый контент на экране. По сути, у меня есть массив из 3 объектов с некоторыми вложенными объектами. Этот главный объект хранится в моем редукторе в качестве исходного состояния (это некоторые фиктивные данные). У меня есть панель Sidenav, на которой есть несколько ссылок, и я хочу визуализировать контент в правой части боковой панели. Я использую пользовательский sidenav, поэтому он может показаться немного запутанным, но моя проблема в том, что мне нужно каким-то образом отобразить этот массив из 3 объектов, чтобы я мог отображать каждый объект на основе ссылки, по которой щелкает пользователь. Я опубликую часть объекта, на которую я смотрю (на самом деле я уже публиковал вопрос об этом раньше, если вы хотите увидеть весь объект). Я младший Dev, так что я уверен, что это не что-то слишком сложное.
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);
и вот объект, с которым я работаю через редуктор
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"
}
]
}
}
]
}
}
};
Массив продуктов с 3 объектами - это то, что я имел в виду. У меня также есть некоторые случайные функции, чтобы посмотреть, получаю ли я данные или нет с console.logs, но в идеале я хочу использовать эту функцию onClickAny для рендеринга любого из трех объектов с правой стороны (возможно, в списке) в зависимости от того, кто-то нажимал кнопки устройства, мобильного телефона или ноутбука. Пожалуйста, любая помощь будет принята с благодарностью!