How to get different values ​when generating an element through Object.keys? - reactjs

Question

I create a sidebar through the object.keys(sidebars), and in each of them there are various menu items that I get from the database, how to change these elements in state.items? To access the item field during generation and display these menu items?
Now I do like this, but nothing comes of it ...
const [sidebarItemsLeagues, setSidebarItemsLeagues] = useState(null); // SIDEBAR 1 ITEMS
const [sidebarItemsCountries, setSidebarItemsCountries] = useState(null); // SIDEBAR 2 ITEMS
const [sidebars] = useState({
leagues: {
title: "SIDEBAR 1",
items: sidebarItemsLeagues // null...
},
countries: {
title: "SIDEBAR 2",
items: sidebarItemsCountries // null...
}
});
useEffect(() => {
api.getTestLeagues() // get sidebar 1 items
.then(data => setSidebarItemsLeagues(data));
}, []);
useEffect(() => {
api.getTestCountries() // get sidebar 2 items
.then(data => setSidebarItemsCountries(data));
}, [])
const onHandleSidebarView = () => { // generate sidebars
return (
Object.keys(sidebars).map((sidebar, idx) => {
const sidebarControl = sidebars[sidebar];
return (
<div className="sidebar" key={idx}>
<div className="sidebar__header">
<p>{sidebarControl.title}</p>
</div>
<div className="sidebar__items">
// SIDEBAR 1 && SIDEBAR 2 ITEMS
</div>
</div>
);
})
);
};

Answer 1

You can use [] notation back onto your object to access its corresponding property dynamically. I changed the map to use key for more clarity
Object.keys(sidebars).map((key, idx) => {
return (
<div className="sidebar" key={idx}>
<div className="sidebar__header">
<p>{sidebars[key].title}</p>
</div>
<div className="sidebar__items">
{
// SIDEBAR ITEMS (assuming it contains an array)
sidebars[key].items.map(itemElement => {
// return some elements
}
}
</div>
</div>
);
})