ReactJS onclick add or remove class to another element

Question

I am struggling to convert my normal jQuery code in to React JS (I'm new to React).

I have the following code:

$(".add").click(function () {
    $("nav").addClass("show");
});
$(".remove").click(function () {
    $("nav").removeClass("show");
});
$(".toggle").click(function () {
    $("nav").toggleClass("show");
});

nav {
  width: 250px;
  height: 150px;
  background: #eee;
  padding: 15px;
  margin-top: 15px;
}
nav.show {
  background: red;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button class="add">Add</button>
<button class="remove">Remove</button>
<button class="toggle">Toggle</button>
<nav>Navigation menu</nav>

Tried references seems that only add/remove class for the same element:

https://stackoverflow.com/a/42630743/6191987

How to add or remove a className on event in ReactJS?

So, how can I convert or create the same jQuery methods to ReactJS?

@SibasishMohanty Already added references, but that wont't help for my case. I mentioned I am new to React JS — vishnu
– vishnu, Commented Aug 18, 2020 at 9:21

Prateek Thapa · Accepted Answer · 2020-10-02 03:46:00Z

8

Use the state that keeps the track of whether to show the nav or not.
Use a class name in the react code that corresponds to the state.
React uses "className" instead of "class" since "class" is already a reserved word in javascript.

You could check this sandbox link for implementation

function App() {
  const [show, setShow] = React.useState();

  return (
    <div className="App">
      <button className="add" onClick={() => setShow(true)}>
        Add
      </button>
      <button className="remove" onClick={() => setShow(false)}>
        Remove
      </button>
      <button className="toggle" onClick={() => setShow(!show)}>
        Toggle
      </button>
      <nav className={show ? "show" : ""}>Navigation menu</nav>
    </div>
  );
}

edited Oct 2, 2020 at 3:46

answered Aug 18, 2020 at 9:19

Prateek Thapa

4,9481 gold badge12 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

vishnu Over a year ago

<nav class="menu"> has already a class "menu", so how can I write this: className={show ? "show" : ""} (need existing class to the code)

Prateek Thapa Over a year ago

@vishnu you could use template strings. Since classNames are strings, you could concatenate them. <nav className={nav ${show ? "show" : ""}}>Navigation menu</nav>

Prateek Thapa Over a year ago

@vishnu I have also made changes to the code sandbox link. You could check there as well.

vishnu Over a year ago

this works for me.. I appreciate your great support

hgb123 · Accepted Answer · 2020-08-19 06:52:00Z

5

You could combine the use useRef for nav and manipulate the ref (accessing nav's DOM) with event handlers for each button

import React from "react";
import "./styles.css";

export default function App() {
  const navRef = React.useRef(null);

  const onAddClick = (e) => {
    navRef.current.classList.add("show");
  };

  const onRemoveClick = (e) => {
    navRef.current.classList.remove("show");
  };

  const onToggleClick = (e) => {
    navRef.current.classList.toggle("show");
  };

  return (
    <div className="App">
      <button onClick={onAddClick}>Add</button>
      <button onClick={onRemoveClick}>Remove</button>
      <button onClick={onToggleClick}>Toggle</button>
      <nav ref={navRef}>Navigation menu</nav>
    </div>
  );
}

.App {
  font-family: sans-serif;
}

nav {
  width: 250px;
  height: 150px;
  background: #eee;
  padding: 15px;
  margin-top: 15px;
}

nav.show {
  background: red;
  color: white;
}

Codesanbox link for demo

Reference:

edited Aug 19, 2020 at 6:52

answered Aug 18, 2020 at 9:21

hgb123

14.9k3 gold badges24 silver badges43 bronze badges

12 Comments

vishnu Over a year ago

Shows a Type error: "Cannot read property 'classList' of null"

hgb123 Over a year ago

@vishnu have you tried like what is implemented in codesandbox link?

hgb123 Over a year ago

@vishnu could you send me the screenshot of your code through imgur link?

vishnu Over a year ago

Error scrn.shot: https://imgur.com/a/i1GlDcQ

hgb123 Over a year ago

@vishnu thanks but I meant the code, not the error, it could be better if I could glance at the part of the code to check what was going on

|

Collectives™ on Stack Overflow

ReactJS onclick add or remove class to another element

2 Answers 2

4 Comments

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related