How to include jQuery JS carousel code into React component

Question

I have an issue with integrating this simple carousel into my React component:

https://codepen.io/Komeyl94/pen/vOaReR

Namely I cannot understand how do I integrate the JS section of code into my React.

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?

Looking at this code I assumed that:

$('.flexslider').flexslider({
  animation: "slide",
  controlNav: false,
});

• we grab every instance of .flexslider class and then append it with a custom event which adds "animation: slide" and "controlNav: false".

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?

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 (

      <div>
        <div className='row_outer'>
          <h1> Aktualności</h1>

          <div className='col-12'>

            <div className='row news_wrapper align-items-center justify-content-center'/>

            {/* Slider */}

            <div className="flexslider left">
              <ul className="slides">
                <li>
                  <img src="https://source.unsplash.com/BaCmEa2hy8g/1600x900"/>
                  <div className="meta">
                    <h1>Lorem ipsum dolor sit amet, consectetur.</h1>
                    <h2>Lorem ipsum dolor sit.</h2>
                    <div className="category">
                      <p>$286600</p>
                      <span>Category</span>
                    </div>
                  </div>
                </li>
                <li>
                  <img src="https://source.unsplash.com/RmZIUIF2S2Q/1600x900"/>
                  <div className="meta">
                    <h1>Lorem ipsum dolor sit amet, consectetur.</h1>
                    <h2>Lorem ipsum dolor sit.</h2>
                    <div className="category">
                      <p>$415000</p>
                      <span>Category</span>
                    </div>
                  </div>
                </li>
                <li>
                  <img src="https://source.unsplash.com/cFplR9ZGnAk/1600x900"/>
                  <div className="meta">
                    <h1>Lorem ipsum dolor sit amet, consectetur.</h1>
                    <h2>Lorem ipsum dolor sit.</h2>
                    <div className="category">
                      <p>$415000</p>
                      <span>Category</span>
                    </div>
                  </div>
                </li>
                <li>
                  <img src="https://source.unsplash.com/Ui8KQ0ahXBM/1600x900"/>
                  <div className="meta">
                    <h1>Lorem ipsum dolor sit amet, consectetur.</h1>
                    <h2>Lorem ipsum dolor sit.</h2>
                    <div className="category">
                      <p>$415000</p>
                      <span>Category</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>



          </div>
        </div>
      </div>
    )
  }
}

export default Reja_S7_News;

Answer 1

If you manipulate the DOM or part of the DOM inside a react component with jQuery or other 3rd party library (google maps), set the shouldComponentUpdate lifecycle method to false preventing react from re-rendering the manipulated DOM. You can also use ref to select the target div.

import React from 'react';
import $ from 'jquery';


class AppWithJQuery extends React.Component {
  
  divRef;
  
  componentDidMount(){
    $(this.divRef).flexslider({...
  }
  
  shouldComponentUpdate(){
    return false;
  }
  
  setRef = ref => { this.divRef = ref };
  
  render(){
    return (
      <div className="flexslider" ref={this.setRef}>
        <ul className="slides">
           ...
        </ul>      
       </div>
    )
  }
}