title: TypeError: Cannot read property 'querySelector' of undefined
body: <p>I'm trying to replicate the following codefor my react project, but it is throwing me the error &quot;Type Error: Cannot read property 'query Selector' of undefined&quot;. Here is a <a href="https://i.stack.imgur.com/C9yNq.png" rel="nofollow noreferrer">Screenshot of the error</a>. Suggest me where should i correct to make my code run.</p>
  <p>I also would like to know how to use JavaScript externally or internally in Reactjs.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let mainPosts = document.querySelectorAll(".main-post");
  let posts = document.querySelectorAll(".post");
  
  let i = 0;
  let postIndex = 0;
  let currentPost = posts[postIndex];
  let currentMainPost = mainPosts[postIndex];
  
  let progressInterval = setInterval(progress, 100); // 180
  
  function progress() {
    if (i === 100) {
      i = -5;
      // reset progress bar
      currentPost.querySelector(".progress-bar__fill").style.width = 0;
      document.querySelector(
        ".progress-bar--primary .progress-bar__fill"
      ).style.width = 0;
      currentPost.classList.remove("post--active");
  
      postIndex++;
  
      currentMainPost.classList.add("main-post--not-active");
      currentMainPost.classList.remove("main-post--active");
  
      // reset postIndex to loop over the slides again
      if (postIndex === posts.length) {
        postIndex = 0;
      }
  
      currentPost = posts[postIndex];
      currentMainPost = mainPosts[postIndex];
    } else {
      i++;
      currentPost.querySelector(".progress-bar__fill").style.width = `${i}%`;
      document.querySelector(
        ".progress-bar--primary .progress-bar__fill"
      ).style.width = `${i}%`;
      currentPost.classList.add("post--active");
  
      currentMainPost.classList.add("main-post--active");
      currentMainPost.classList.remove("main-post--not-active");
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url("https://fonts.googleapis.com/css?family=Titillium+Web:400,700&amp;display=swap");
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
    padding: 0;
    // height: 100vh;
    // display: grid;
    // grid-template-rows: 1fr 3fr 1.5fr;
    // grid-template-columns: 50px 1fr 1fr 1fr 1fr 50px;
    // row-gap: 2vh;
    font-family: "Titillium Web", sans-serif;
  }
  
  .carousel {
    min-height: 100vh;
    display: grid;
    grid-template-rows: 1fr 3fr 1.5fr;
    grid-template-columns: 50px 1fr 1fr 1fr 1fr 50px;
    row-gap: 2vh;
    position: relative;
  }
  
  .progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 5px;
    width: 100%;
    &amp;__fill {
      width: 0;
      height: inherit;
      background: #c20000;
      transition: all 0.16s;
    }
    &amp;--primary {
      z-index: 2;
    }
  }
  
  
  
  .main-post-wrapper {
    
    // height: 100vh;
    // border: solid 2px green;
    
    grid-row: 1 / 4;
    grid-column: 1 / 7;
    
    position: relative;
  }
  .slides {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }
  
  .main-post {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    &amp;__image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      bottom: 0;
      img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
      }
      &amp;::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(#0e0d0e, 0.5);
      }
    }
    &amp;__content {
      position: absolute;
      top: 40%;
      left: 4%;
      transform: translateY(-40%);
      color: #fff;
      width: 90%;
    }
    &amp;__tag-wrapper {
      margin: 0;
      display: inline-flex;
      overflow: hidden;
    }
    &amp;__tag {
      font-size: 0.95em;
      background: #c20000;
      padding: 6px 18px;
    }
    &amp;__title {
      font-weight: 700;
      font-size: 1.95em;
      line-height: 1.25;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }
    &amp;__link {
      text-decoration: none;
      color: #fff;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      display: inline-flex;
      align-items: center;
      &amp;-text {
        font-size: 0.9em;
      }
      &amp;-icon {
        &amp;--arrow {
          margin-left: 12px;
        }
        &amp;--play-btn {
          margin-right: 12px;
        }
      }
    }
  }
  
  .main-post__link:hover .main-post__link-text,
  .main-post__link:hover .main-post__link-icon--arrow path {
    color: #c20000;
    stroke: #c20000;
  }
  
  .main-post--active {
    top: 0;
    z-index: 1;
    transition: top 0.9s 0.4s ease-out;
  }
  
  .main-post--not-active {
    top: 100%;
    z-index: 0;
    transition: top 0.75s 2s;
  }
  
  .main-post.main-post--active .main-post__tag-wrapper {
    width: 25%;
    transition: all 0.98s 1.9s;
  }
  .main-post.main-post--not-active .main-post__tag-wrapper {
    width: 0;
    transition: width 0.3s 0.2s;
  }
  
  .main-post.main-post--active .main-post__title {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s 1.42s, transform 0.5s 1.4s;
  }
  
  .main-post.main-post--not-active .main-post__title {
    transform: translateY(40px);
    opacity: 0;
    transition: transform 0.2s 0.35s, opacity 0.5s 0.2s;
  }
  
  .main-post.main-post--active .main-post__link {
    opacity: 1;
    transition: opacity 0.9s 2.2s;
  }
  
  .main-post.main-post--not-active .main-post__link {
    opacity: 0;
    transition: opacity 0.5s 0.2s;
  }
  
  .posts-wrapper {
    grid-row: 3 / 4;
    grid-column: 3 / 6;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 14px;
    z-index: 1;
  }
  
  .post {
    background: rgba(#0e0d0e, 0.6);
    opacity: 0.3;
    color: #fff;
    position: relative;
    padding: 16px 20px;
    &amp;__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.8em;
    }
    &amp;__tag {
      color: #80837e;
    }
    &amp;__title {
      font-weight: 400;
      font-size: 0.95em;
      line-height: 1.5;
    }
    &amp;--active {
      opacity: 1;
      background: rgba(#0e0d0e, 0.75);
    }
    &amp;:not(.post--active) {
      pointer-events: none;
    }
  }
  
  .hide-on-mobile {
    display: none;
  }
  
  @media screen and (min-width: 768px) {
    .main-post__title {
      font-size: 2.9em;
    }
  }
  @media screen and (min-width: 1024px) {
    .hide-on-mobile {
      display: grid;
    }
    .posts-wrapper {
      grid-column: 2 / 6;
    }
    .hide-on-desktop {
      display: none;
    }
  }
  
  @media screen and (min-width: 1440px) {
    .main-post__content {
      width: 45%;
    }
    .posts-wrapper {
      grid-column: 3 / 6;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="carousel"&gt;
    &lt;div class="progress-bar progress-bar--primary hide-on-desktop"&gt;
      &lt;div class="progress-bar__fill"&gt;&lt;/div&gt;
    &lt;/div&gt;
  
  &lt;header class="main-post-wrapper"&gt;
    
    &lt;div class="slides"&gt;
      &lt;article class="main-post main-post--active"&gt;
        &lt;div class="main-post__image"&gt;
          &lt;img src="https://www.formula1.com/content/dam/fom-website/manual/Misc/2019-Races/Monaco2019/McLarenMonaco19.jpg.transform/9col/image.jpg" alt="New McLaren wind tunnel 'critical' to future performance, says Tech Director Key" /&gt;
        &lt;/div&gt;
        &lt;div class="main-post__content"&gt;
          &lt;div class="main-post__tag-wrapper"&gt;
            &lt;span class="main-post__tag"&gt;News&lt;/span&gt;
          &lt;/div&gt;
          &lt;h1 class="main-post__title"&gt;New McLaren wind tunnel 'critical' to future performance, says Tech Director Key&lt;/h1&gt;
          &lt;a class="main-post__link" href="#"&gt;
                &lt;span class="main-post__link-text"&gt;find out more&lt;/span&gt;
                &lt;svg
                  class="main-post__link-icon main-post__link-icon--arrow"
                  width="37"
                  height="12"
                  viewBox="0 0 37 12"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                &gt;
                  &lt;path
                    d="M0 6H36.0001M36.0001 6L31.0001 1M36.0001 6L31.0001 11"
                    stroke="white"
                  /&gt;
                &lt;/svg&gt;
              &lt;/a&gt;
        &lt;/div&gt;
      &lt;/article&gt;
      &lt;article class="main-post main-post--not-active"&gt;
        &lt;div class="main-post__image"&gt;
          &lt;img src="https://www.formula1.com/content/dam/fom-website/sutton/2019/Hungary/Saturday/1017645792-LAT-20190803-_2ST5188.jpg.transform/9col-retina/image.jpg" alt="What To Watch For in the 2019 Hungarian Grand Prix" /&gt;
        &lt;/div&gt;
        &lt;div class="main-post__content"&gt;
          &lt;div class="main-post__tag-wrapper"&gt;
            &lt;span class="main-post__tag"&gt;Video&lt;/span&gt;
          &lt;/div&gt;
          &lt;h1 class="main-post__title"&gt;What To Watch For in the 2019 Hungarian Grand Prix&lt;/h1&gt;
          &lt;a class="main-post__link" href="#"&gt;
                &lt;svg
                  class="main-post__link-icon main-post__link-icon--play-btn"
                  width="30"
                  height="30"
                  viewBox="0 0 20 20"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                &gt;
                  &lt;circle
                    cx="10"
                    cy="10"
                    r="9"
                    stroke="#C20000"
                    stroke-width="2"
                  /&gt;
                  &lt;path d="M14 10L8 6V14L14 10Z" fill="white" /&gt;
                &lt;/svg&gt;
                &lt;span class="main-post__link-text"&gt;play video&lt;/span&gt;
              &lt;/a&gt;
        &lt;/div&gt;
      &lt;/article&gt;
      &lt;article class="main-post main-post--not-active"&gt;
        &lt;div class="main-post__image"&gt;
          &lt;img src="https://www.formula1.com/content/dam/fom-website/manual/Misc/2019-Races/Austria-2019/Top3Austria2019.jpg.transform/9col-retina/image.jpg" alt="Hamilton wants harder championship fight from Leclerc and
              Verstappen" /&gt;
        &lt;/div&gt;
        &lt;div class="main-post__content"&gt;
          &lt;div class="main-post__tag-wrapper"&gt;
            &lt;span class="main-post__tag"&gt;News&lt;/span&gt;
          &lt;/div&gt;
          &lt;h1 class="main-post__title"&gt;Hamilton wants harder championship fight from Leclerc and Verstappen
          &lt;/h1&gt;
          &lt;a class="main-post__link" href="#"&gt;
                &lt;span class="main-post__link-text"&gt;find out more&lt;/span&gt;
                &lt;svg
                  class="main-post__link-icon main-post__link-icon--arrow"
                  width="37"
                  height="12"
                  viewBox="0 0 37 12"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                &gt;
                  &lt;path
                    d="M0 6H36.0001M36.0001 6L31.0001 1M36.0001 6L31.0001 11"
                    stroke="white"
                  /&gt;
                &lt;/svg&gt;
              &lt;/a&gt;
        &lt;/div&gt;
      &lt;/article&gt;
    &lt;/div&gt;
  &lt;/header&gt;
  
  &lt;div class="posts-wrapper hide-on-mobile"&gt;
    &lt;article class="post post--active"&gt;
      &lt;div class="progress-bar"&gt;
        &lt;div class="progress-bar__fill"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;header class="post__header"&gt;
        &lt;span class="post__tag"&gt;News&lt;/span&gt;
        &lt;p class="post__published"&gt;16 August 2019&lt;/p&gt;
      &lt;/header&gt;
      &lt;h2 class="post__title"&gt;New McLaren wind tunnel 'critical' to future performance, says Tech Director Key&lt;/h2&gt;
    &lt;/article&gt;
    &lt;article class="post"&gt;
      &lt;div class="progress-bar"&gt;
        &lt;div class="progress-bar__fill"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;header class="post__header"&gt;
        &lt;span class="post__tag"&gt;Video&lt;/span&gt;
        &lt;p class="post__published"&gt;12 August 2019&lt;/p&gt;
      &lt;/header&gt;
      &lt;h2 class="post__title"&gt;What To Watch For in the 2019 Hungarian Grand Prix&lt;/h2&gt;
    &lt;/article&gt;
    &lt;article class="post"&gt;
      &lt;div class="progress-bar"&gt;
        &lt;div class="progress-bar__fill"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;header class="post__header"&gt;
        &lt;span class="post__tag"&gt;News&lt;/span&gt;
        &lt;p class="post__published"&gt;08 August 2019&lt;/p&gt;
      &lt;/header&gt;
      &lt;h2 class="post__title"&gt;Hamilton wants harder championship fight from Leclerc and Verstappen
      &lt;/h2&gt;
    &lt;/article&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>