Select and deselect multiple div in react-js

I'd approach this by storing an array of todo objects in state with useState(), and maintain a selected property for each todo. As the todos are clicked, the selected property is changed.

To limit the selections to 4, simply add a check with a count like below.

CodeSandbox demo

import React, { useState } from "react";
import ReactDOM from "react-dom";

function App() {
  const [todos, setTodos] = useState([
    { id: "1", name: "Task 1", selected: true },
    { id: "2", name: "Task 2", selected: false },
    { id: "3", name: "Task 3", selected: false },
    { id: "4", name: "Task 4", selected: false },
    { id: "5", name: "Task 5", selected: false }
  ]);

  const todoClicked = (e) => {
    // max 4 selected
    if (!e.target.classList.contains("selected")) {
      const selectedCount = todos.filter((todo) => todo.selected).length;
      if (selectedCount === 4) {
        return;
      }
    }

    setTodos(
      todos.map((todo) =>
        todo.id === e.target.getAttribute("data-id")
          ? { ...todo, selected: !todo.selected }
          : todo
      )
    );
  };

  return (
    <div>
      {todos.map((todo) => (
        <div
          onClick={todoClicked}
          data-id={todo.id}
          key={todo.id}
          className={`todoDiv${todo.selected ? " selected" : ""}`}
        >
          {todo.name}
        </div>
      ))}
    </div>
  );
}

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

I have added a TASK_LIST to dynamically render the div. Here toggleTask function will both select & de-select the div. And as you said, maximum of four div will be selected.

import { Fragment, useState } from "react";

const TASK_LIST = [1, 2, 3, 4, 5];

export default function MultiSelect() {
  const [selectedTask, selectTask] = useState([]);

  const isSelected = (taskId) => {
    return selectedTask.filter((task) => task === taskId).length;
  };

  const toggleTask = (taskId) => {
    if (isSelected(taskId)) {
      // deselect div
      selectTask((tasks) => tasks.filter((ts) => ts !== taskId));
    } else if (selectedTask.length < 4) {
      // select div, max four div will be selected
      selectTask((tasks) => [...tasks, taskId]);
    }
  };

  return (
    <Fragment>
      {TASK_LIST.map((task) => (
        <div
          className={`todoDiv${isSelected(task) ? " select" : ""}`}
          key={task}
          onClick={() => toggleTask(task)}
        >
          Task{task}
        </div>
      ))}
    </Fragment>
  );
}

In Reactjs, we use state to keep track of and render the view of the component. In your case, we can create a state called selected which maintains the list of selected tasks.

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

function App() {
  const [selected, setSelected] = useState([])
  const updateSelected = (task) => {
    if(!selected.includes(task) && selected.length < 4) {
      let newSelected = [...selected, task];
      setSelected(newSelected)
    } else {
      let newSelected = selected.filter(t => t !== task)
      setSelected(newSelected)
    }
  }
  let tasks = ["Task1", "Task2", "Task3", "Task4", "Task5"]
  return (
    <main>
      {
        tasks.map(task => (
          <div onClick={() => updateSelected(task)} className={`todoDiv ${selected.includes(task) ? 'select' : ''}`}>{task}</div>
        ))
      }
      {`selected = ${selected.join(", ")}`}
    </main>
  );
}

export default App;

Initally, it is empty. When the user clicks on a task, it is added to the list of selected tasks. In the updateSelected, we implement required logic as shown above. Notice in the className for each task we use JaveScript template strings. This helps us to conditionally add class 'selected' to the className if it is selected by the user.

/* Start by defiinig a variable 'divState' to save the state of
   your divs and a function 'setDivState' sto modify that state.
   
   The state variable 'divState' eventually will look like this:
   
   {
      div1: false,
      div2: true,
      div3: false,
      ...
   }
*/
const [divState, setDivState] = useState({})

// we will use this function to update a div state:
const updateState = (id) => {
    setDivState(prevState =>
        ({
            ...prevState, // keep the other divs as they are rught now
            [`div${item}`]: !prevState[`div${item}`] // update the current
            // div's
            // state
        }))
}

// Now we will render the divs, as many as you want
// I will use a the map function to iterate over an array of 4 divs
{
    [1, 2, 3, 4].map(item => (
        <div
            className={`todoDiv ${divState[`div${item}`] ? 'select' : ''}`} // assign
            // class dynamically depending on the current div's state
            onClick={() => updateState(item)}>
            {/* render something inside the divs */}
        </div>
    ))
}

A complete component example:

import React, {useState} from 'react';

const YourComponent = () => {
    /* Start by defiinig a variable 'divState' to save the state of
       your divs and a function 'setDivState' sto modify that state.
       
       The state variable 'divState' eventually will look like this:
       
       {
          div1: false,
          div2: true,
          div3: false,
          ...
       }
    */
    const [divState, setDivState] = useState({})

// we will use this function to update a div state:
    const updateState = (id) => {
        setDivState(prevState =>
            ({
                ...prevState, // keep the other divs as they are rught now
                [`div${item}`]: !prevState[`div${item}`] // update the current
                // div's
                // state
            }))
    }

// Now we will render the divs, as many as you want
// I will use a the map function to iterate over an array of 4 divs
    return (
        <>  {
            [1, 2, 3, 4].map(item => (
                <div
                    {/* assign class dynamically depending on the current
                     div's state */}
                    className={`todoDiv ${divState[`div${item}`] ? 'select' : ''}`}
                    onClick={() => updateState(item)}>
                    {/* render something inside the divs */}
                </div>
            ))
        }
        </>
    )
}

you can put styles in a variable like so

const [style, setStyle] = useState({ "--my-css-var": 10 })

Then put this in your div like so

<div style={style}>...</div>

Then, create a function onClick on the div that changes the "style" variable. Change the state of the the style variable

<div style={style} onClick={() => setStyle({"--my-css-var": 12})}>...</div>

You get the jist