javascript - how can I convert jquery to reactjs component?

Question

I want to make carousel with custom pagination in "tiles style". I'm using react slick lib.

I found here a working demo which is using jquery :

HTML PART

<section class="slider">
<div data-title="title1" data-thumb="http://cdn.bulbagarden.net/upload/e/ec/001MS.png"><img src="http://cdn.bulbagarden.net/upload/c/c0/Spr_3f_001.png"></div>
<div data-title="title2" data-thumb="http://cdn.bulbagarden.net/upload/b/bb/004MS.png"><img src="http://cdn.bulbagarden.net/upload/e/e9/Spr_3f_004.png"></div>
<div data-title="title3" data-thumb="http://cdn.bulbagarden.net/upload/9/92/007MS.png"><img src="http://cdn.bulbagarden.net/upload/f/f8/Spr_3f_007.png"></div>
<div data-title="title4" data-thumb="http://cdn.bulbagarden.net/upload/0/0f/025MS.png"><img src="http://cdn.bulbagarden.net/upload/5/5b/Spr_3f_025.png"></div>
<div data-title="title5" data-thumb="http://cdn.bulbagarden.net/upload/d/de/133MS.png"><img src="http://cdn.bulbagarden.net/upload/a/a9/Spr_3f_133.png"></div>
<div data-title="title6" data-thumb="http://cdn.bulbagarden.net/upload/a/a7/151MS.png"><img src="http://cdn.bulbagarden.net/upload/3/33/Spr_3f_151.png"></div>

JQUERY

$(".slider").slick({
        dots: true,
        arrows: false,
        infinite: false,
        slidesToShow: 2,
        slidesToScroll: 2,

//autoplay: true,
//dots: true
customPaging : function(slider, i) {
    var title = $(slider.$slides[i].innerHTML).find('div[data-title]').data('title');
    return '<a class="pager__item"> '+title+' </a>';
},

//responsive: [{ 
//    breakpoint: 200,
//    settings: {
///        d
//    } 
//}]

});

Full working demo here (jquery) : https://codepen.io/neverov12/pen/OJLYpzm

I want to convert from jquery to full reactjs, but no success.

What I've tried here (reactjs) : https://codesandbox.io/s/dazzling-hugle-wtcht

question from:https://stackoverflow.com/questions/65541037/how-can-i-convert-jquery-to-reactjs-component

Answer 1

You are using customPaging wrong, this callback function only have one parameter which is slide number. I made it working in your given demo. Here is full working code.

import React, { Component } from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

export default class App extends Component {
  render() {
    const settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 2,
      slidesToScroll: 1,
      appendDots: (dots) => (
        <div
          style={{
            borderRadius: "10px",
            padding: "10px"
          }}
        >
          <ul> {dots} </ul>
        </div>
      ),
      customPaging: function (i) {
        return (<a className="pager__item">{i + 1}</a>)
      },
    };

    return (
      <div>
        <section className="slider">
          <Slider {...settings}>
            <div
              data-title="title1"
              data-thumb="http://cdn.bulbagarden.net/upload/e/ec/001MS.png"
            >
              <img alt="" src="http://cdn.bulbagarden.net/upload/c/c0/Spr_3f_001.png" />
            </div>
            <div
              data-title="title2"
              data-thumb="http://cdn.bulbagarden.net/upload/b/bb/004MS.png"
            >
              <img alt="" src="http://cdn.bulbagarden.net/upload/e/e9/Spr_3f_004.png" />
            </div>
            <div
              data-title="title3"
              data-thumb="http://cdn.bulbagarden.net/upload/9/92/007MS.png"
            >
              <img alt="" src="http://cdn.bulbagarden.net/upload/f/f8/Spr_3f_007.png" />
            </div>
            <div
              data-title="title4"
              data-thumb="http://cdn.bulbagarden.net/upload/0/0f/025MS.png"
            >
              <img alt="" src="http://cdn.bulbagarden.net/upload/5/5b/Spr_3f_025.png" />
            </div>
            <div
              data-title="title5"
              data-thumb="http://cdn.bulbagarden.net/upload/d/de/133MS.png"
            >
              <img alt="" src="http://cdn.bulbagarden.net/upload/a/a9/Spr_3f_133.png" />
            </div>
            <div
              data-title="title6"
              data-thumb="http://cdn.bulbagarden.net/upload/a/a7/151MS.png"
            >
              <img alt="" src="http://cdn.bulbagarden.net/upload/3/33/Spr_3f_151.png" />
            </div>
          </Slider>
        </section>
      </div>
    );
  }
}

Also for more about custom paging refer docs here - https://react-slick.neostack.com/docs/example/custom-paging