title: How do you use the Swiper callback methods in React?
body: <p>I have a component class and need to be able to use <code>.slideToLoop()</code> and <code>.update()</code>, and haven't been able to figure out how to use those methods with the Swiper React library.</p>
  <p>I need to do this when something else is clicked on, so that the Swiper can update (as it's hidden initially), and then slideTo the relevant slide.</p>
  <p>At the moment, I have the click trigger in jQuery in <code>componentDidMount()</code> as I'm porting things over into React. But happy to change this as well if it's better to. The click happens on a grandchild component.
  And I have the swiper instance being set into the state, but that happens after <code>componentDidMount</code>, so I can't access it from there.</p>
  <p>Code:</p>
  <pre><code>  constructor(props) {
      super(props);
      this.state = {
        swiperIns: ''
      }
    }
    
    setSwiper = (swiper) =&gt; {
      this.setState({swiperIns: swiper}, () =&gt; {
        console.log(this.state.swiperIns);
      });
    }
  
  
    componentDidMount() {
      const { appStore } = this.props;
      if (!appStore.hasLoadedHomePage)
        appStore.loadHomePage().catch((ex) =&gt; null);
        
       const mySwiper = this.state.swiperIns;
       console.log(mySwiper); // returns ''
        
        $('.modal-trigger').on('click', function(e) {
           e.preventDefault();
           var modalToOpen = $(this).attr('data-modal-id');
           console.log(modalToOpen);
               if ($(this)[0].hasAttribute('data-slideindex')) {
                   const slideTo = parseInt($(this).attr('data-slideindex'));
                   // this.state.slideToLoop(slideTo);
               }
  
               $('#' + modalToOpen).show();
               $('body').addClass('modal-open');
               
               if ($('#' + modalToOpen).hasClass('modal--swiper')) {
                   // this.state.swiperIns.update();
               }
       });
    }
  </code></pre>
  <p>and the return part of the Swiper:</p>
  <pre><code>&lt;Swiper onSwiper={ this.setSwiper } spaceBetween={0} slidesPerView={1} loop&gt;
  ...
  &lt;/Swiper&gt;
  </code></pre>
  <p>Any help or suggestions are appreciated.</p>