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?

Answer 1

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>