How to get children div via parent useRef in Reactjs - reactjs

Question

I have div like that
const indexRef = useRef();
<div className='indexBx' ref={indexRef}>
<span className='active'>01</span>
<span className='active'>02</span>
<span className='active'>03</span>
</div>
So now I want to change the secondary span classname via indexRef like something
indexRef.current.span:nth(2).className = ???
How can I do that

Answer 1

// change class of second child
indexRef.current.children[1].className = 'passive'

Answer 2

As indexRef.current with contain the reference to the div.indexBx element. You can call on that any function which allows to retrieve any DOM element from a given parent element like this
indexRef.current.querySelector('span:nth(2)');
This will return the second span
Here is how you can query sub element after you have already access to their parent element using HTML and Javascript. This will work exactly the same in react when you get access to the indexRef.current parent element
let indexRef = document.querySelector('.indexBx');
let span = indexRef.querySelector('span:nth-child(2)');
console.log(span.innerText);
<div class='indexBx'>
<span class='active'>01</span>
<span class='active'>02</span>
<span class='active'>03</span>
</div>
After you have access to the span, you can call normal javascript to append another class to that span
let span = indexRef.current.querySelector('span:nth-child(2)');
span.classList.remove('old_class_name');
span.classList.add('new_class_name');

Answer 3

You can use querySelector and getElementsByClassName on the HTMLDivElement contained in the ref.
Here is an exemple : https://codesandbox.io/s/naughty-ellis-pywpyr
import "./styles.css";
import { useRef } from "react";
export default function App() {
const indexRef = useRef();
const changeClassName = () => {
const span = indexRef.current.querySelector("span:nth-child(2)");
span.setAttribute("class", "changed");
console.log(indexRef, span);
};
return (
<div className="indexBx" ref={indexRef}>
<span className="active">01</span>
<span className="active">02</span>
<span className="active">03</span>
<button onClick={() => changeClassName()}>Change class</button>
</div>
);
}
But this approach is not the best to change a className you should just put javascript logic in the className of the span like this instead of creating a ref for that and manipulating the HTML element:
<span className={`${isChanged} ? 'changed' : 'active'`}>02</span>

Answer 4

As you have mentioned that you need to update the class of the span using ref from a different function, I have simulated a sample app with Parent and Child components. And updating the class of the 2nd span on click of the button Click Me
const { useRef } = React;
const ChildComponent = ({ indexRef, onChange }) => {
return (
<div className="indexBx" ref={indexRef}>
<span className="active">01</span>
<span className="active">02</span>
<span className="active">03</span>
</div>
);
};
const ParentComponent = () => {
const indexRef = useRef(null);
const onClick = () => {
if (indexRef.current) {
const div = indexRef.current;
console.log(div.children[2].className);
div.children[2].classList.add("test");
console.log(div.children[2].className);
}
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<ChildComponent indexRef={indexRef} />
<button onClick={onClick}>Click Me</button>
</div>
);
};
ReactDOM.render(<ParentComponent />, document.getElementById("react"));
.test {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="react"></div>