In ReactJS, ensure only a single div is active at any given moment

Question

In ReactJS, ensure only a single div is active at any given moment

I'm working on a layout with three divs in each row, and there are multiple rows. Only one div can be selected at a time within a row, and selecting a new div will automatically unselect the previously selected one. Here is a simplified version of my code:

 <div className="row">
    <div className="heil select"><button>Click One</button></div>
    <div className="heil"><button>Click Two</button></div>
    <div className="heil"><button>Click Three</button></div>
</div>
...

The select class is used to highlight the clicked div. I need help implementing this functionality dynamically in React, where only one div in each row can be selected (similar to a radio button). I'm new to ReactJS, so any guidance would be greatly appreciated. Thank you!

javascript css reactjs ecmascript-6

Answer 1

Answer №1

I have created a functional example that meets your requirements.

import { useState } from "react";

export default function Grid() {
    const numRows = 3;
    const rows = Array(numRows).fill(0);
    const cellsPerRow = ["Click One", "Click Two", "Click Three"];
    const [selectedCellIndexes, setSelectedCellIndexes] = useState(
        Array(numRows).fill(0)
    );

    const handleCellClick = (parentIdx, childIdx) => {
        setSelectedCellIndexes((selectedCellIndexes) => {
            selectedCellIndexes[parentIdx] = childIdx;
            return [...selectedCellIndexes];
        });
    };

    return (
        <div>
            {rows.map((row, parentIdx) => {
                return (
                    <div className="row">
                        {cellsPerRow.map((name, childIdx) => {
                            return (
                                <div
                                    className={`cell ${
                                        childIdx === selectedCellIndexes[parentIdx] && "highlighted"
                                    }`}
                                    onClick={() => handleCellClick(parentIdx, childIdx)}
                                >
                                    <button>{name}</button>
                                </div>
                            );
                        })}
                    </div>
                );
            })}
        </div>
    );
}

}

Answer 2

I have created a functional example that meets your requirements.

import { useState } from "react";

export default function Grid() {
    const numRows = 3;
    const rows = Array(numRows).fill(0);
    const cellsPerRow = ["Click One", "Click Two", "Click Three"];
    const [selectedCellIndexes, setSelectedCellIndexes] = useState(
        Array(numRows).fill(0)
    );

    const handleCellClick = (parentIdx, childIdx) => {
        setSelectedCellIndexes((selectedCellIndexes) => {
            selectedCellIndexes[parentIdx] = childIdx;
            return [...selectedCellIndexes];
        });
    };

    return (
        <div>
            {rows.map((row, parentIdx) => {
                return (
                    <div className="row">
                        {cellsPerRow.map((name, childIdx) => {
                            return (
                                <div
                                    className={`cell ${
                                        childIdx === selectedCellIndexes[parentIdx] && "highlighted"
                                    }`}
                                    onClick={() => handleCellClick(parentIdx, childIdx)}
                                >
                                    <button>{name}</button>
                                </div>
                            );
                        })}
                    </div>
                );
            })}
        </div>
    );
}

}

In ReactJS, ensure only a single div is active at any given moment

Answer №1

Similar questions

Struggling to handle JSON response in JavaScript

Centering an image (svg) vertically inside a link tag

Arranging Content with Bootstrap Columns

The Heroku application is rendering with different CSS and positioning compared to the local development environment

WARNING: Alert raised due to the discovery of two offspring sharing identical keys, `${item}-${index}`

Error: Cannot locate module: Vue not found, incorrect path specified

Experiencing a console error which reads: "SyntaxError: Missing ) after argument list."

Allow the button to be clicked only when both options from the 1/3 + 1/3 radio buttons are selected

Is there a way to determine if a React functional component has been displayed in the code?

differences in rendering of flexbox align-items: center between Chrome and Firefox

Communication between a directive controller and a service via an HTTP call

Establish height and width parameters for creating a dynamic and adaptable bar chart with recharts

Angular 1: Handling Multiple Conditions and Exclusions Based on Other Conditions

React: Blur input element when escape key is pressed

Custom AngularJS directive fails to reflect changes in model after selecting a file

The div background image in Vue.js is displaying a 404 not found error

Axios is not properly executing the post request

Using jQuery, we can replace all `<span>` elements with `<img>` elements and then verify if the images have been successfully loaded

The basic jQuery script seems to be malfunctioning

javascript various backgrounds on click