CODEWITHSUNDEEP
javascriptreactjs
Dave Bergschneider
Dave Bergschneider

Reputation: 413

Converting JavaScript to work with React component

New to React and am trying to write my script in React but not sure how to do it.I've tried using states but that has just clouded me with more confusion. The below code is a sample of something I might commonly create.

Here's my script:

const hamburger = document.querySelector(".hamburger");
hamburger.addEventListener("click", function () {
  hamburger.classList.toggle("is-active");
  document.querySelector(".navigation").classList.toggle("slide-in");
  document.querySelector("body").classList.toggle("menu-active");
  document.querySelector(".shell-ui-main").classList.toggle("menu-overlay");
});

Here's a basic react component for a navbar:

 import React from 'react';

export default class NavComponent extends React.Component {

  render() {
      return (
            <div className="container">
                <button className="hamburger hamburger--squeeze" type="button">
                    <span className="hamburger-box">
                        <span className="hamburger-inner"></span>
                    </span>
                </button>
                <a className="logo-link" href="/">
                    <img width="94" height="31" src="/img/logos/logo.png" srcSet="/img/logos/logo.png 1x, /img/logos/[email protected] 2x, /img/logos/[email protected] 3x"
                        alt="logo" className="logo" />
                </a>
                <nav className="navigation">
                    <ul className="nav">
                        <li className="single-item">
                            <a href="/">Home</a>
                        </li>
                        <li className="single-item">
                            <a href="#">Item 2</a>
                        </li>
                        <li className="single-item">
                            <a href="#">Item 3</a>
                        </li>
                        <li className="single-item">
                            <a href="#">Item 4</a>
                        </li>
                    </ul>
                </nav>
            </div>
        );
  }
}

Upvotes: 0

Views: 87

Answers (1)

Dave Bergschneider
Dave Bergschneider

Reputation: 413

Here's the solution in case anyone is interested. Additionally I pass the props down to the component and control from there instead of the individual const.

import React from 'react';

const HamburgerToggle = (props) => (
    <button className={"hamburger hamburger--squeeze" + (props.active ? " is-active" : "")} onClick={props.clickHandler} type="button">
        <span className="hamburger-box">
            <span className="hamburger-inner"></span>
        </span>
    </button>
);

const Logo = () => (
    <a className="logo-link" href="/">
        <img width="94" height="31" src="/img/logos/logo.png" srcSet="/img/logos/logo.png 1x, /img/logos/[email protected] 2x, /img/logos/[email protected] 3x" alt="Logo" className="logo" />
    </a>
);

const Navigation = (props) => (
    <nav className={"navigation" + (props.active ? " slide-in" : "")}>
        <ul className="nav">
            <li className="single-item">
                <a href="/">Home</a>
            </li>
            <li className="single-item">
                <a href="#">intem 2</a>
            </li>
            <li className="single-item">
                <a href="#">item 3</a>
            </li>
            <li className="single-item">
                <a href="#">item 4</a>
            </li>
        </ul>
    </nav>
);

export default class NavComponent extends React.Component {

    state = {active: false};

  handleClick(e){
      this.setState({active: !this.state.active});
      console.log(this.state.active);
  }

  render() {
      return (
            <div className="container">
                <HamburgerToggle active={this.state.active} clickHandler={this.handleClick.bind(this)} />
                <Logo />
                <Navigation active={this.state.active} clickHandler={this.handleClick.bind(this)} />
            </div>
        );
  }
}

Upvotes: 1

Related Questions