I want to add 'active' class only for the selected div in React JS

Question

import React, { useState } from 'react';
import './style.css';

let cInActive = 'inactive';
let cActive = 'active';

export default function App() {
  const [addClass, setAddClass] = useState(cInActive);
  const handleClick = () => {
    setAddClass(cActive);
  };

  return (
    <div>
      <div className={addClass} onClick={handleClick}>
        click here 1
      </div>
      <br />
      <div className={addClass} onClick={handleClick}>
        click here 2
      </div>
      <br />
      <div className={addClass} onClick={handleClick}>
        click here 3
      </div>
      <br />
      <div className={addClass} onClick={handleClick}>
        click here 4
      </div>
    </div>
  );
}

Find the stackblitz link https://stackblitz.com/edit/react-deukb1?file=src%2FApp.js

I want to add 'active' class only for the selected div in React JS...

Answer 1

Depending on your requirements, the best way to accomplish this will be different.

Only one selected at a time.

To force only one item being selected at a time, the best method is to store an identifier of the selected div in state and then determine during the render what class it should get.

In this example I'm making use of a pattern called currying, where you call a function in the render that creates a closure so that the number is correct for each handler.

Note - I used inline styles instead of a class for simplicity, but the pattern is the same.

const { useState } = React;

const active = {backgroundColor: 'green'}
const inactive = {}

function App() {
  const [selected, setSelected] = useState(0);
  const handleClick = (divNum) => () => {
    setSelected(divNum);
  };

  return (
    <div>
      <div style={selected == 1 ? active : inactive} onClick={handleClick(1)}>
        click here 1
      </div>
      <br />
      <div style={selected == 2 ? active : inactive} onClick={handleClick(2)}>
        click here 2
      </div>
      <br />
      <div style={selected == 3 ? active : inactive} onClick={handleClick(3)}>
        click here 3
      </div>
      <br />
      <div style={selected == 4 ? active : inactive} onClick={handleClick(4)}>
        click here 4
      </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>

Multiple items selected at a time

If you don't need to limit to once selection at a time, the best way to accomplish this changes.

While you could still do it with a single state/component, it would be easier to move the selection logic into a new reusable component as follows:

const { useState } = React;

const active = {backgroundColor: 'green'}
const inactive = {}

function SelectableDiv(props) {
  const [selected, setSelected] = useState(false);
  const handleClick = () => {
    setSelected(!selected);
  };
  return (
    <div style={selected ? active : inactive} onClick={handleClick}>
      click here {props.number}
    </div>
  );
}

function App() {

  return (
    <div>
      <br />
      <SelectableDiv number={1} />
      <br />
      <SelectableDiv number={2} />
      <br />
      <SelectableDiv number={3} />
      <br />
      <SelectableDiv number={4} />
    </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>