CODEWITHSUNDEEP
javascriptreactjs
core114
core114

Reputation: 5335

React js to add panel event issue

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

Upvotes: 0

Views: 482

Answers (2)

sachin mathew
sachin mathew

Reputation: 1457

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>
    );
  }
}

Upvotes: 1

Tom Holmes
Tom Holmes

Reputation: 1204

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'));

Upvotes: 1

Related Questions