Remove / add classname from a HTML elements using React hooks

Question

I'm trying to remove an attripute from html element using on click on a button:

import React , {useState} from 'react';
import classNames from 'classnames';
function App () {
    const [isActive, setIsActive] = useState(false);

    const handleOnClick = () => {
      setIsActive(!isActive);
    };
    return (
        <InlineBlockLogIn 
               className={classNames('active', { 'active' : isActive})} 
               onClick={handleOnClick} >
        
        <InlineBlockReg 
               className={classNames('', { 'active' : isActive})} 
               onClick={handleOnClick} >
)};

I would like to remove the "active" from InlineBlockLogIn when clicked on the InlineBlockReg and so on. So basically if active at one div it should be inactive at the second one. Any idea how to do so please?

Hi I've updated the code .. would you be able to help with the above please? — DirWolf, Nov 16 '21 at 12:12
that's not the issue by the way. I only try to cut the code to show simple v. of it on here. — DirWolf, Nov 16 '21 at 12:22

score 2 · Answer 1 · answered Nov 16 '21 at 12:29

The code in your question does not have a single root element, is missing closing tags and the handlers are not correct. Maybe the following code can help you:

const App = () => {
  const [isActive, setIsActive] = React.useState(true);
  const handleOnClick = (value) => {
    setIsActive(value);
  };
  return (
    <div>
      <div
        className={isActive ? "active" : ""}
        onClick={() => handleOnClick(false)}
      >
        InlineBlockLogIn
      </div>

      <div
        className={isActive ? "" : "active"}
        onClick={() => handleOnClick(true)}
      >
        InlineBlockReg
      </div>
    </div>
  );
};

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

<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>

<div id="root"></div>

Remove / add classname from a HTML elements using React hooks

1 Answers1