title: How to include jQuery JS carousel code into React component
body: <p>I have an issue with integrating this simple carousel into my React component:</p>
  
  <p><a href="https://codepen.io/Komeyl94/pen/vOaReR" rel="nofollow noreferrer">https://codepen.io/Komeyl94/pen/vOaReR</a></p>
  
  <p>Namely I cannot understand how do I integrate the JS section of code into my React.</p>
  
  <p>I've read a few topics and already included the jQuery bit of code into the DidComponentMount element of my component, but how do I "target" this piece of code to the carousel?</p>
  
  <p>Looking at this code I assumed that:</p>
  
  <pre><code>$('.flexslider').flexslider({
    animation: "slide",
    controlNav: false,
  });
  </code></pre>
  
  <ul>
  <li>we grab every instance of .flexslider class and then append it with a custom event which adds "animation: slide" and "controlNav: false".</li>
  </ul>
  
  <p>Am I getting this right? Funny enough the adjacent CSS has neither "slide" nor controlNav definition so where does this function get the executable code from? </p>
  
  <pre><code>import React, { Component } from 'react';
  import {NavLink} from "react-router-dom";
  import $ from 'jquery';
  
  
  
  class Reja_S7_News extends Component {
    constructor(props) {
      super(props)
    }
  
  
    componentDidMount(){
      $('.flexslider').flexslider({
        animation: "slide",
        controlNav: false,
      });
    }
  
  
  
  
    render() {
  
      return (
  
        &lt;div&gt;
          &lt;div className='row_outer'&gt;
            &lt;h1&gt; Aktualności&lt;/h1&gt;
  
            &lt;div className='col-12'&gt;
  
              &lt;div className='row news_wrapper align-items-center justify-content-center'/&gt;
  
              {/* Slider */}
  
              &lt;div className="flexslider left"&gt;
                &lt;ul className="slides"&gt;
                  &lt;li&gt;
                    &lt;img src="https://source.unsplash.com/BaCmEa2hy8g/1600x900"/&gt;
                    &lt;div className="meta"&gt;
                      &lt;h1&gt;Lorem ipsum dolor sit amet, consectetur.&lt;/h1&gt;
                      &lt;h2&gt;Lorem ipsum dolor sit.&lt;/h2&gt;
                      &lt;div className="category"&gt;
                        &lt;p&gt;$286600&lt;/p&gt;
                        &lt;span&gt;Category&lt;/span&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                    &lt;img src="https://source.unsplash.com/RmZIUIF2S2Q/1600x900"/&gt;
                    &lt;div className="meta"&gt;
                      &lt;h1&gt;Lorem ipsum dolor sit amet, consectetur.&lt;/h1&gt;
                      &lt;h2&gt;Lorem ipsum dolor sit.&lt;/h2&gt;
                      &lt;div className="category"&gt;
                        &lt;p&gt;$415000&lt;/p&gt;
                        &lt;span&gt;Category&lt;/span&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                    &lt;img src="https://source.unsplash.com/cFplR9ZGnAk/1600x900"/&gt;
                    &lt;div className="meta"&gt;
                      &lt;h1&gt;Lorem ipsum dolor sit amet, consectetur.&lt;/h1&gt;
                      &lt;h2&gt;Lorem ipsum dolor sit.&lt;/h2&gt;
                      &lt;div className="category"&gt;
                        &lt;p&gt;$415000&lt;/p&gt;
                        &lt;span&gt;Category&lt;/span&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                    &lt;img src="https://source.unsplash.com/Ui8KQ0ahXBM/1600x900"/&gt;
                    &lt;div className="meta"&gt;
                      &lt;h1&gt;Lorem ipsum dolor sit amet, consectetur.&lt;/h1&gt;
                      &lt;h2&gt;Lorem ipsum dolor sit.&lt;/h2&gt;
                      &lt;div className="category"&gt;
                        &lt;p&gt;$415000&lt;/p&gt;
                        &lt;span&gt;Category&lt;/span&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/li&gt;
                &lt;/ul&gt;
              &lt;/div&gt;
  
  
  
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default Reja_S7_News;
  </code></pre>