React js to add panel event issue

Question

Im beginner for the reactjs , I added some panel for my react project, i faced some conflict on that button event, when the click on button panel not open, anyone know how to correctly add this

That is my code. index.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  render() {
    return (
      <div>
       <div id="mySidepanel" class="sidepanel">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>
      </div>
      <button class="openbtn" onclick="openNav()">☰ Toggle Sidepanel</button>
     </div>

    );
  }
}

render(<App />, document.getElementById('root'));

hello.js

import React from 'react';

export default ({ name }) => <h1>Hello {name}!</h1>;
function openNav() {
  document.getElementById("mySidepanel").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidepanel").style.width = "0";
}

stack blitz here

Answer 1

In react, you generally don't modify DOM elements directly, but just render them in the form you currently want them. Your render function will be called again any time the state or properties of the component change. (Additionally in react you use className= instead of class= , and onClick={function} instead of onclick="code" ).

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      sidepanelOpen: false,
    };
  }

  render() {
    return (
      <div>
       <div id="mySidepanel" className="sidepanel" style={{width: this.state.sidepanelOpen ? '250px' : '0px'}}>
        <a href="javascript:void(0)" className="closebtn" onClick={() => this.setState({sidepanelOpen: false })}>×</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>
      </div>
      <button className="openbtn" onClick={() => this.setState({sidepanelOpen: true})}>☰ Toggle Sidepanel</button>
     </div>

    );
  }
}

render(<App />, document.getElementById('root'));

Answer 2

Handling events with React elements is very similar to handling events on DOM elements. There are some syntactic differences: For example, in HTML:

<button onclick="activateLasers()">
  Button
</button>

for react :

<button onClick={activateLasers}>
  Activate Lasers
</button>

in your case : for opening sidepanel

 <button class="openbtn" onClick={this.openNav}>☰ Toggle Sidepanel</button>

for closing sidepanel

    <a href="javascript:void(0)" class="closebtn" onClick={this.closeNav}>×</a>

and put the function inside the same component

final code looks like this :

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }
  openNav = () => {
    document.getElementById("mySidepanel").style.width = "250px";
  }
 closeNav = () => {
  document.getElementById("mySidepanel").style.width = "0";
}
  render() {
    return (
      <div>
       <div id="mySidepanel" class="sidepanel">
        <a href="javascript:void(0)" class="closebtn" onClick={this.closeNav}>×</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>
      </div>
      <button class="openbtn" onClick={this.openNav}>☰ Toggle Sidepanel</button>
     </div>
    );
  }
}