hide and show menu with React.js

If you are working with React, we work with components, and it would be best if the hamburger menu is a component that you call from your main application.

To show and close the menu, you can set in the state of the main application a boolean that indicates whether the component is visible or not, and according to that with ternary if you show it or not.

To display it, click on the click event of the hamburger icon that is visible, and to close it, you make a function in the main application that sets the boolean to not visible. This function is passed as property to the menu component.

More or less the code would be like this:

Main application:

  import React, { Component } from 'react';
  // aqui importas el componente, poniendo el path donde estaria ubicado.
  import BurguerMenu from './tupath.js'

  class Main extends Component {

    state ={
      BurguerMenuVisible: false
    }

    openBurguerMenu = () => {
      this.setState({BurguerMenuVisible: true})
    }

    closeBurguerMenu = () => {
      this.setState({BurguerMenuVisible: false})
    }

    render() {
      return(
        //Aqui tendras los componentes de tu aplicacion. Entre esos el menu al que le 
        //pasas la funcion cerrar como propiedad
       { this.state.burguerMenuVisible &&            
        <BurguerMenu clickCerrar = {this.closeBurguerMenu} />
       }
        //tambien tendras tu boton hamburguesa que el el OnClick le pasas la funcion de abrir
        //suponiendo que es un boton...
        <button type = "button" onClick = {this.openBurguerMenu}></button>
      )
    }
  }

the hamburger menu component can be a functional component since you do not need to have states or anything else to render the menu. To your code you only add the Onclick in the X button and you pass the closing function:

import React from 'react';

function BurguerMenu(props) {

return(  
<nav role="navigation" className="nav-menu-2 w-nav-menu">
        <div>
          <a href="../index.html" className="nav-link-6 _2 w-nav-link">INICIO</a>
          <a href="tecnologias.html" className="nav-link-6 _1 w-nav-link">TECNOLOGÍAS</a>
          <a href="../Vision/VISION.html" className="nav-link-5 w-nav-link">VISION</a>
          <a href className="nav-link-5 _2 w-nav-link">CASOS DE USO </a>
          <a href="../Nosotros/Nosotros.html" className="nav-link-3 w-nav-link">NOSOTROS </a>
          <a href className="nav-link-6 w-nav-link">DEMO </a>
          <a href="https://medium.com/@spotcloudio" target="_blank" style={{color: '#fff', cursor: 'pointer'}} className="nav-link-6 w-nav-link">BLOG</a>
        </div>
        <div className="redes">
          <a href="https://www.linkedin.com/company/spotcloud/" className="li" target="_blank"><img src="../images/027-linkedin%20(1).svg" alt /></a>
          <a href="https://www.facebook.com/SpotCloud.io/" className="fb" target="_blank"><img src="../images/036-facebook.svg" alt /></a>
          <a href="https://www.instagram.com/spotcloud.io/?hl=es-la" className="in" target="_blank"><img src="../images/4-layers.svg" alt /></a>
        </div>
      </nav>
      <div onClick = {props.clickCerrar} className="menu-button-2 a.cp_btns1 w-nav-button" data-ix="navbar"><img src="https://uploads-ssl.webflow.com/5b71b8c59c22cb48ab086d4a/5b736bcf05c5995c9ece2124_11-layers.svg" className="img-i" /><img src="https://uploads-ssl.webflow.com/5b71b8c59c22cb48ab086d4a/5b736c0003163dfe7a60c742_3-layers.svg" className="image-29 img-x" /></div>
    </div>
  )
}

export default BurguerMenu