<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
const { useEffect } = React; const elements = document.getElementsByClassName('myClassName'); // Convert the HTMLCollection to an array
const elementArray = Array.from(elements);
// Loop through the selected elements and set their font size
elementArray.forEach((element, index) => { element.style.fontSize = `${14 + index * 2}px`; }, []); // Empty dependency array means this effect runs once, similar to componentDidMount
<div className='container'>
<h2>React Js Get Element by ClassName</h2>
<p className="myClassName">This is First paragraph with the class name 'myClassName'.</p>
<p className="myClassName">This is Second paragraph with the class name 'myClassName'.</p>
<p className="myClassName">This is Third paragraph with the class name 'myClassName'.</p>
<p className="myClassName">This is Fourth paragraph with the class name 'myClassName'.</p>
<p className="myClassName">This is Fifth paragraph with the class name 'myClassName'.</p>
ReactDOM.render(<App />, document.getElementById("app")); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);