Semantic UI sidebar won't show - React

Question

I'm currently implementing a sidebar on my AppBar using Semantic UI in React. So far I've gotten this down :

import React, { Component } from 'react'
import { Menu, Segment, Dropdown, Icon, Button, Sidebar, Dimmer } from 'semantic-ui-react'
import { LogInButtonEX } from './LogInButton.jsx'
import { IndicateursEX } from './Indicateur.jsx'
/*import { SidebarMenuEX } from './Sidebar.jsx'*/

export class AppBarEX extends Component {
  state = { activeItem: 'home', visible: false, dimming: false }

  constructor (props) {
    super(props);
    this.bringupsidebar = this.bringupsidebar.bind(this);
    this.hidesidebar = this.hidesidebar.bind(this);
  }

  handleItemClick = (e, { name }) => this.setState({ activeItem: name })

  bringupsidebar () {
      this.state.visible = !this.state.visible;
      this.state.dimming = true;
  }

  console_output(){
      console.log("sidebar brought up and visible set to: ")
      console.log(this.state.visible)
      console.log("dimming set to: ")
      console.log(this.state.dimming)
  }

  hidesidebar () {
      this.state.visible = !this.state.visible;
      if (this.state.dimming === true) 
      {
        this.state.dimming = false;
      }
      else
      {
        this.state.dimming = true;
      }
  }

  render() {
    const { activeItem } = this.state.activeItem

return (
<div>

  <Segment inverted>
    <Menu inverted pointing secondary>
      <Menu.Item>
        <Icon name='list layout' size = 'large' onClick={this.bringupsidebar}/>
      </Menu.Item>
        <Segment basic>
          <Dropdown item text='Home'>
            <Dropdown.Menu>
                <Dropdown.Item>New Account</Dropdown.Item>
                <Dropdown.Item>Help</Dropdown.Item>
            </Dropdown.Menu>
        </Dropdown>
        </Segment>

      <Menu.Menu position = 'right'>
          <Menu.Item>
              <Icon name='alarm' size = 'large'/>
          </Menu.Item>
        <Menu.Item name='Contracts' active={activeItem === 'messages'} onClick={this.handleItemClick} />
        <Menu.Item name='Account' active={activeItem === 'friends'} onClick={this.handleItemClick} />
        <Menu.Item>
          <Icon name='id badge' size = 'large'/>
        </Menu.Item>
      </Menu.Menu>
    </Menu>
  </Segment>


  <Sidebar
        as={Menu}
        animation='overlay'
        width='thin'
        direction='left'
        visible={this.state.visible}
        icon='labeled'
        vertical
        inverted
  >
    <Menu.Item name='home'>
      <Icon name='home' />
      Home
    </Menu.Item>
    <Menu.Item name='gamepad'>
      <Icon name='gamepad' />
      Games
    </Menu.Item>
    <Menu.Item name='camera'>
      <Icon name='camera' />
      Channels
    </Menu.Item>
  </Sidebar>


  <Sidebar.Pusher onClick = {this.hidesidebar} >
    <Dimmer.Dimmable as={Segment} dimmed={this.state.dimming}>
      <IndicateursEX/>
    </Dimmer.Dimmable>
  </Sidebar.Pusher>
</div>
)

} }

So the problem I'm getting is relatively simple, the sidebar just does not show. It's there though, you can see it through the element browser in the browser developper panel, but it will not show.

I've checked the state variables I am using and their values are set correctly. visible is set to true when the icon button for the sidebar is clicked and so is dimmed and they are turned off accordingly.

I suspect the problem must be coming from either the setting the attribute (ex : dimmed = {this.state.dimming} or from the sidebar itself which is incorecctly positioned? The element itself does not appear on the screen though I can find it in the element list as such :

The rendering part of the script is somewhere else but works well so I did not think it would be necessary to include it here.

Any help would be much appreciated!!

Answer 1

In react you change state using this.setState() method that triggers component rerender. If you do it directly by assigning a value to this.state.something = value , state will change but DOM will not.

https://codesandbox.io/s/N9X4lWQkK