CODEWITHSUNDEEP
javascripthtmlreactjssiblings
Jayendra Parmar
Jayendra Parmar

Reputation: 774

What is a react way to do this?

I have a pretty basic scenario where I have bunch of selectable/clickable elements and want to highlight the last selected/clicked. Here is my jquerish version of it where I add particular css class to the selected element and remove that class from its siblings. Is there any better way to do this with React ?

function Controls(props) {

    const getSiblings = (element) => {
        let siblings = [];
        if (!element.parentNode) {
            return siblings;
        }

        let sibling  = element.parentNode.firstChild;
        while (sibling) {
           if (sibling.nodeType === 1 && sibling !== element) {
               siblings.push(sibling);
           }
           sibling = sibling.nextSibling;
        }
        return siblings;
    };

    const handleClick = (event) => {
        event.target.classList.add("symbol-preview-selected");
        let siblings = getSiblings(event.target);
        siblings.map((e) => {
            e.classList.remove("symbol-preview-selected")
        });
    };

    return(
        <div className="grid-control-container">
            <div className="flex-row-container">
                <span style={{marginRight: "4px"}}>Color:</span>
                <div className="flex-row-container">
                    {[...Array(10).keys()].map((i) => <div className={`symbol-preview symbol-`+i} onClick={handleClick} key={i.toString()}/>)}
                </div>
            </div>
        </div>
    );    
}

Upvotes: 0

Views: 69

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 370699

Put the clicked element index into state instead.

function Controls(props) {
    const [selectedIndex, setSelectedIndex] = useState(-1);
    const makeHandleClick = i => () => {
        setSelectedIndex(i);
    };
    return (
        <div className="grid-control-container">
            <div className="flex-row-container">
                <span style={{ marginRight: "4px" }}>Color:</span>
                <div className="flex-row-container">
                    {[...Array(10).keys()].map((i) => (
                        <div
                            className={'symbol-preview symbol-' + i + (i === selectedIndex ? ' symbol-preview-selected' : '')}
                            onClick={makeHandleClick(i)}
                            key={i}
                        />
                    ))}
                </div>
            </div>
        </div>
    );
}

Upvotes: 1

Related Questions