How to pass data-attribute value to another function outside map function?

Question

I'm working on a slider, what I'm trying to accomplish is to pass the data-attribute from outside my object to the bullet-navigation so that it matches to the current slide? I don't know how I'm stuck.

can someone help?

import React from 'react';
import Swiper from 'react-id-swiper';

class RunSwiper extends React.Component {

  render() {

    const dataSlides = [
      'Ga voor grenzeloos',
      'Sectoren',
      'Wat wil jij?',
      'Vlogs',
      'Belangrijke data'
    ];

    const params = {
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
        renderBullet: function (index, className) {
          return '<div class="' + className + '">' + (index + 1) + name + '</div>';
        }
      }
    };

    return (
      <Swiper {...params}>
          {
            dataSlides.map((name, index) => {
                return <div className={`swiper__step swiper__step--${index + 1}`} key={index} data-slide={name}>{name}</div>
            })
          }
      </Swiper>
    )
  }
}

export default runSwiper;

Answer 1

You are already receiving the index as an argument. So you can use that index to access the name from the dataSlides array.

const params = {
   pagination: {
      el: '.swiper-pagination',
      clickable: true,
      renderBullet: function (index, className) {
        return '<div class="' + className + '">' + (index + 1) + dataSlides[index] + '</div>';
      }
   }
};