И так, проблему с изменением видимости я решил.
Элементу, видимость которого мы хотим менять присваиваем некий уникальный айди:
<div id={given.Name} style={{display : 'none', height: '100%'}}> </div>
Затем объявляем функцию, которая как раз и будет искать наш элемент и менять его стиль.
function changeVisibility(sid) {
var elem = document.getElementById(sid);
var typedisp = window.getComputedStyle(elem, null).display;
typedisp = typedisp === 'block' ? 'none' : 'block';
elem.style.display = typedisp;
}
Данная функция, как параметр принимает айди нужного элемента.
И после всего у другого элемента на событие onClick() сажаем вызов функции, которая описана выше и передаем айди нужного элемента(в моем случае событие onClick использовалось у компонента PatterFly MenuItem
<MenuItem onClick={()=>{changeVisibility(given.Name)}}>
<div id={given.Name} style={{display : 'none', height: '100%'}}>
</div>
</MenuItem>
Если кому надо привожу описание всего компонента:
class MenuBasicList extends React.Component {
constructor(props) {
super(props);
this.state = {
activeItem: 0,
};
console.log(this.props.curSw)
this.onSelect = (event, itemId) => {
console.log(`clicked ${itemId}`);
this.setState({
activeItem: itemId
});
};
}
render() {
const { activeItem } = this.state;
const openInNewTab = (url) => {
const newWindow = window.open(url, '_blank', 'noopener,noreferrer')
if (newWindow) newWindow.opener = null
}
function changeVisibility(sid) {
var elem = document.getElementById(sid);
var typedisp = window.getComputedStyle(elem, null).display;
typedisp = typedisp === 'block' ? 'none' : 'block';
elem.style.display = typedisp;
console.log(window.getComputedStyle(elem, null).display);
}
return (
<Menu activeItemId={activeItem} onSelect={this.onSelect}>
<MenuContent>
<MenuList>
{
this.props.prms.map( (given) => {return given.host === this.props.curSw ? ([<MenuItem onClick={()=>{changeVisibility(given.Name)}}>
<div style={{display:'flex', alignItems: 'center'}}>
<img src={given.picture ==="router" ? routerpic : given.picture === "switch" ? switchpic : given.picture === "asa" ? asapic : null} height="45px" width="90px" alt="Some image" />
<p style={{fontSize: '3.5vh', margin: '0.5em'}}>{given.Name}</p>
</div>
<div id={given.Name} style={{display : 'none', height: '100%'}}>
<iframe src={given.address} style={{ height: '400px', width : "50%",float: 'left'}} ></iframe>
<ul>
<li><b>Model</b>: {given.info.model} </li>
<li><b>RAM size:</b> {given.info.ram}</li>
<ul style={{listStyle:'square outside', fontWeight: 'bold'}}>Modules: {given.info.modules.map((module) => {return <li style={{marginLeft: "54%", fontWeight: 'normal'}}>{module}</li> })}</ul>
<li><img src={ require('./networks/'+given.info.image).default} width={'50%'} alt="image not found" /></li>
</ul>
</div>
</MenuItem>]) : ""})
}
</MenuList>
</MenuContent>
</Menu>
);
}
}