R
R
Reiser952020-12-28 00:23:53
Owl Carousel
Reiser95, 2020-12-28 00:23:53

Owl carousel react data update not happening immediately?

Good night, I'm making a product carousel, in which the user can add their products as favorites, adding via redux works, the code is correct, I checked 100 times that all data is received / deleted and everything is fine with them, but the problem is with the owl carousel, I I click, for example, add a product, it does not add, although everything in redux is ok, then for example I add another one, after which the one that I added earlier will be added, in fact the data is late for one action.
Someone faced this problem? Carousel code:

import React from 'react';
import {connect} from 'react-redux';

import './FavoriteTovar.css';

import OwlCarousel from 'react-owl-carousel';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';

import FavoriteItem from './FavoriteItem/FavoriteItem.jsx'

const FavoriteGames = ({isAuth, favoriteTovar}) => {
  const options = {
      margin: 35,
      nav: true,
      navText: ['<div class="main__arrow--prev main__arrow"><svg class="arrow main__like--slider--arrow--prev--icon" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 477.175 477.175" xmlSpace="preserve"><g><path d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225 c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z" /></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg></div>', '<div class="main__arrow--next main__arrow"><svg class="arrow main__like--slider--arrow--next--icon" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 477.175 477.175" xmlSpace="preserve"><g><path d="M360.731,229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1,0s-5.3,13.8,0,19.1l215.5,215.5l-215.5,215.5 c-5.3,5.3-5.3,13.8,0,19.1c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-4l225.1-225.1C365.931,242.875,365.931,234.275,360.731,229.075z" /></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg></div>'],
      responsiveClass: true,
      responsive:{
          0:{
              items:1
          },
          800:{
              items:2
          },
          1745:{
              items:3,
          }
      }
  }

  return(
    <div className="main__like--tovar--inner">
        {isAuth
        	&& <div className="main__like--tovar--slider">
                <OwlCarousel {...options} className="main__like--tovar--carousel">
        	        {favoriteTovar.map((name, id) => <FavoriteItem key={`${id}_${name}`} tovarName={name} />)}
                </OwlCarousel>
            </div>
  )
}

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question