import React, { Component } from 'react'; import './SideBar.css' class SideBar extends Component { state = { } render() { var toggleOptions = false var sideBar = document.querySelector('#sideBar'); const toggleOptionsOnClick = (e) => { e.preventDefault() switch(toggleOptions) { case false : toggleOptions = true sideBar.setAttribute('id', 'openedSideBar') case true : toggleOptions = false sideBar.setAttribute('id', 'sideBar') default : } } console.log(sideBar); return ( <nav id="sideBar"> <div id='container' onClick={this.toggleOptionsOnClick} style={{cursor:'pointer'}} > <div className='burger'></div> <div className='burger'></div> <div className='burger'></div> </div> </nav> ); } } export default SideBar;

Este es mi componente de reacción de la barra lateral y todo está bien, sin errores ni errores ... pero cuando hago clic en el div de opciones de hamburguesa, no hace el método que cambia el atributo de identificación de la barra lateral. ¿Alguien sabe por qué? Nota: el comando console.log devuelve nulo