title: How to access all dom elements by class name in React?
body: <p>I would like to access all <strong>dom</strong> elements with specific class name, but on react looks like this is not working as in pure javascript. It seems that it cannot find the elements.</p>
  
  <pre><code>import React from 'react';
  import {Route, Link} from 'react-router-dom';
  import {Bootstrap, Grid, Row, Col, Button, Image, Modal, Popover} from 'react-bootstrap';
  import Header from '../header/header.component';
  import style from './information.style.scss';
  import { Player } from 'video-react';
  import YouTube from 'react-youtube';
  
  class InformationJob extends React.Component {
  
      constructor(props) {
          super(props);
          this.state = {
              slideIndex: 1,
              job: null,
          };
          this.showDivs = this.showDivs.bind(this);
      }
  
      plusDivs(n) {
           this.setState({slideIndex: this.state.slideIndex + n});
           this.showDivs(this.state.slideIndex);
      }
  
      showDivs(n) {
          var i;
          var x = document.getElementsByClassName("mySlides");
          if (n &gt; x.length) {this.setState({slideIndex :1})}
          if (n &lt; 1) {this.setState({slideIndex :x.length})}
          for (i = 0; i &lt; x.length; i++) {
              x[i].style.display = "none";
          }
          x[this.state.slideIndex-1].style.display = "block";
      }
  
      componentDidMount() {
          this.showDivs(this.state.slideIndex);
      }
  
      _onReady(event) {
          // access to player in all event handlers via event.target
          event.target.pauseVideo();
      }
  
      render() {
          const opts = {
              height: '390',
              width: '100%',
              playerVars: { // https://developers.google.com/youtube/player_parameters
                  autoplay: 0
              }
          };
          return (
              &lt;div className={"wrapperDiv"}&gt;
  
                  &lt;div className={"flexDivCol"}&gt;
                      &lt;div id="header"&gt;
                          &lt;Header size="small"/&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;h3 className={""} style={{marginBottom: '20px'}}&gt;Majoitus- ja ravitsemisala&lt;/h3&gt;
                          &lt;h4 className={"primaryColor"}&gt;Tarjoilija&lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;div id="imageSection"&gt;
                          &lt;div className="w3-content w3-display-container"&gt;
                              &lt;img className="mySlides"
                                   src="https://thumbs.dreamstime.com/b/waitress-serving-food-to-visitors-young-european-couple-table-positive-plates-restaurant-48875722.jpg"/&gt;
                                  &lt;img className="mySlides"
                                       src="https://thumbs.dreamstime.com/b/waitress-serving-food-to-visitors-young-european-couple-table-positive-plates-restaurant-48875722.jpg"/&gt;
                                      &lt;img className="mySlides"
                                           src="https://thumbs.dreamstime.com/b/waitress-serving-food-to-visitors-young-european-couple-table-positive-plates-restaurant-48875722.jpg"/&gt;
                                          &lt;img className="mySlides"
                                               src="https://thumbs.dreamstime.com/b/waitress-serving-food-to-visitors-young-european-couple-table-positive-plates-restaurant-48875722.jpg"/&gt;
                              &lt;button className="w3-button w3-black w3-display-left" onClick={this.plusDivs(-1)}&gt;&amp;#10094;&lt;/button&gt;
                              &lt;button className="w3-button w3-black w3-display-right" onClick={this.plusDivs(1)}&gt;&amp;#10095;&lt;/button&gt;
                          &lt;/div&gt;
                          {/*&lt;div className={"screenSection"} style={{backgroundImage: 'url(https://thumbs.dreamstime.com/b/waitress-serving-food-to-visitors-young-european-couple-table-positive-plates-restaurant-48875722.jpg)'}}&gt;&lt;/div&gt;*/}
                      &lt;/div&gt;
                      &lt;div id="jobDescription"&gt;
                          &lt;p className={"secondaryColor"}&gt;Donec facilisis tortor ut augue lacinia, at viverra est semper. Sed sapien metus, scelerisque nec pharetra id, tempor a tortor. Pellentesque non dignissim neque. Ut porta viverra est, ut dignissim elit elementum ut. Nunc vel rhoncus nibh, ut tincidunt turpis. Integer ac enim pellentesque, adipiscing metus id, pharetra odio. Donec facilisis tortor ut augue lacinia, at viverra est semper. Sed sapien metus, scelerisque nec pharetra id, tempor a tortor. Pellentesque non dignissim neque. Ut porta viverra est, ut dignissim elit elementum ut. Nunc vel rhoncus nibh, ut tincidunt turpis.  &lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div id="videoSection"&gt;
                          &lt;YouTube
                              videoId="0cfVxK5YrGY"
                              opts={opts}
                              onReady={this._onReady}
                          /&gt;
                      &lt;/div&gt;
                      &lt;div id={"btnFilter"}&gt;
                          &lt;Link to='/traineeships'&gt;
                              &lt;Button  className={"primaryBtn"}&gt;
                                  Näytä harjoittelupaikat
                              &lt;/Button&gt;
                          &lt;/Link&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default InformationJob;
  </code></pre>
  
  <p>Error I got: </p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'style' of undefined
        at InformationJob.showDivs (information-job.component.js:74)
        at InformationJob.plusDivs (information-job.component.js:58)
        at InformationJob.render (information-job.component.js:138)</p>
  </blockquote>
  
  <p>Edit:
  When I console log  var x = document.getElementsByClassName("mySlides"); x is showing null.</p>