adding and removing a classList in react js

Question

I am using functional component in react js , in the below code the class right-panel-active is not being added / is undefined. Someone help to enable the class be added when the button is toggled

import React from 'react';
import './style.css';
import {
  Modal,
  DropdownMenu
} from '../MaterialUI';

/**
* @author
* @function Header
**/

const Header = (props) => {

  const container = () => {
    document.getElementById('container');
  }    
  const signUpButton = () => {
     container.classList.add('right-panel-active');
  };  
  const signInButton = () => {
     container.classList.remove('right-panel-active');
  };

  return (
    <div className="header">
        <div className="container" id="container">
           <button className="ghost" id="signIn" onClick={signInButton} >Sign In</button>
        </div>
           <div className="overlay-panel overlay-right">
           <p>Enter your personal details and start journey with us</p>
                <button className="ghost" id="signUp" onClick={signUpButton} >Sign Up</button>
              </div>
            </div>
  )

}

export default Header

You should not manipulate the DOM directly in React. Can you post your full component? — Zsolt Meszaros
– Zsolt Meszaros, Commented Nov 25, 2020 at 18:30

dw_ · Accepted Answer · 2020-11-25 19:16:36Z

You are not utilising any of React's functionality.

Read about state management in React and Event Handlers in React

const Header = (props) => {
 const [isContainerActive, setIsContainerActive] = React.useState(false);
  const signUpButton = () => {
     setIsContainerActive(false);
  };  
  const signInButton = () => {
     setIsContainerActive(true);
  };

  return (
    <div className="header">
      <div id="container" className={`container${isContainerActive ? " right-panel-active" : ""}`}>
         <button className="ghost" id="signIn" onClick={signInButton}>Sign In</button>
      </div>
      <div className="overlay-panel overlay-right">
       <p>Enter your personal details and start journey with us</p>
       <button className="ghost" id="signUp" onClick={signUpButton}>Sign Up</button>
      </div>
    </div>
  );
}

ReactDOM.render(<Header />, document.getElementById("root"));

.header {height: 120px;}
.container {float:left;}
.overlay-right {display: none;background: red;float:right;height:100%;}
.right-panel-active ~ .overlay-right {display: inline-block;}

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

PS: I also recommend https://www.npmjs.com/package/classnames , or the cx library for className management.

Lautaro Zarandon · Accepted Answer · 2020-11-25 18:47:00Z

0

I think the best solution for this is to making a state and handle the style by a ternarian

    function Welcome(props) {
    const {name} = props;
    return (
        <h1 style={name === 'Sara' ? right-panel-active : right-panel-inactive}>Hello, {name}</h1>
    )}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
    </div>
  );
}

answered Nov 25, 2020 at 18:47

Lautaro Zarandon

2903 silver badges11 bronze badges

Comments

Sarun UK · Accepted Answer · 2020-11-25 18:53:29Z

This is the React way of doing,

You have to keep a local state (useState) and track the button click and based on the state change update the class to the container. You shouldn't directly change the DOM.

Click on the button to see the CSS is adding or not.

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [isSignUp, setSignUp] = useState(true);
  return (
    <div id="container" className={isSignUp ? "right-panel-active" : ""}>
      <button onClick={() => setSignUp(false)}>SignIn</button>
      <button onClick={() => setSignUp(true)}>SignUp</button>
      //for testing the change
      {isSignUp ? "right-panel-active added" : "right-panel-active removed"}
    </div>
  );
}

Sample working code - https://codesandbox.io/s/fragrant-http-qo6du?file=/src/App.js

score 0 · Accepted Answer · 2020-12-02 10:06:36Z

0

No need to add click event with vanilla js, you could add an React onClick event. You forgot to return the container.


// if you use curly braces you must return the value
 const container = () => {
   return document.getElementById('container');
 };    

// or skip the curly braces
 const container = () => 
    document.getElementById('container');

edited Dec 2, 2020 at 10:06

answered Nov 25, 2020 at 18:37

user8737957

Collectives™ on Stack Overflow

adding and removing a classList in react js

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related