React Component

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

const CounterButton = (props)=>{
  
    const [currentCount, setCurrentCount] = useState(0);
    
    const handleClick = (event)=>{
        if(currentCount == 9){
            event.target.classList.toggle('bound-hit');
        }
        setCurrentCount(currentCount+props.incrementVal); 
        
    };

    return (
        <div class="count-container">
            <button onClick={handleClick}>+{props.incrementVal}</button>
            <p>{currentCount}</p>
        </div>
    );
};

export default CounterButton;

External stylesheet for this ponent

.count-container {
  display: flex;
  padding: 10px;
}

.count-container > button {
  width: 50px;
  margin: 0 10px;
}

.bound-hit {
  color: red;
}

I have a react ponent and stylesheet for that ponent. In this case it toggle class bound-hit to the classList of button. I could select button using event.target and but I want to toggle this class to the <p></p> tag inside my div. My question is how can I select that p tag using event. p tag is like a sibling of button. div with class count-container is parent. I can also select parent div by event.target.parent but I want to select p tag and toggle class bound-hit to that.. How can I do that?

React Component

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

const CounterButton = (props)=>{
  
    const [currentCount, setCurrentCount] = useState(0);
    
    const handleClick = (event)=>{
        if(currentCount == 9){
            event.target.classList.toggle('bound-hit');
        }
        setCurrentCount(currentCount+props.incrementVal); 
        
    };

    return (
        <div class="count-container">
            <button onClick={handleClick}>+{props.incrementVal}</button>
            <p>{currentCount}</p>
        </div>
    );
};

export default CounterButton;

External stylesheet for this ponent

.count-container {
  display: flex;
  padding: 10px;
}

.count-container > button {
  width: 50px;
  margin: 0 10px;
}

.bound-hit {
  color: red;
}

I have a react ponent and stylesheet for that ponent. In this case it toggle class bound-hit to the classList of button. I could select button using event.target and but I want to toggle this class to the <p></p> tag inside my div. My question is how can I select that p tag using event. p tag is like a sibling of button. div with class count-container is parent. I can also select parent div by event.target.parent but I want to select p tag and toggle class bound-hit to that.. How can I do that?

• javascript
• css
• reactjs
• dom

Share Improve this question Follow asked Apr 7, 2021 at 6:24 Kasun JalithaKasun Jalitha 77199 silver badges2222 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

I don't think you need a React specific answer here.

In vanilla JS you can use the nextElementSibling method.

const handleClick = (event) => {
  const p = event.target.nextElementSibling
}

Or instead you can do it in CSS with the adjacent sibling binator.

.bound-hit + p {
  // apply styles to the <p> that's just after .bound-hit in the DOM
}

---

However, if you "manually" add a class in a react ponent (meaning that this class gets added to the DOM without any representation in the state), some virtual DOM reconciliations might end up removing it.

In a lot of cases, this won't be a problem, but if it is, then you should use a state for it. Here's a simplified example of what that would look like:

const [pClass, setPClass] = useState('')
const handleClick = () => {
  setPClass('bound-hit')
}

return (
  <p className={pClass} />
)

The question shouldn't be "how to select a sibling" but "how to assign CSS class to the P element on [condition]".

If a React ponent directly has ownership over the (child) elements you can simple change the ponents state and apply it to the class list of the element using className.

Doing any DOM manipulation/traversing within a ponent is mainly bad form using React and overplicates the solution.

const CounterButton = (props)=>{
  
    const [currentCount, setCurrentCount] = useState(0);
    const [currentClass, setCurrentClass] = useState();
    
    const handleClick = (event)=>{
        if(currentCount == 9){
            setCurrentClass('bound-hit');
        }
        setCurrentCount(currentCount+props.incrementVal); 
    };

    return (
        <div class="count-container">
            <button onClick={handleClick}>+{props.incrementVal}</button>
            <p className={currentClass}>{currentCount}</p>
        </div>
    );
};