last day (15 days later) » 

10:17 AM
Hi Karel
Can you read me?
 
10:34 AM
yes
but keep in mind that I am at work
 
no problem, thank you for helping
this is the class component i am trying to refactor
import React from 'react';
import Swiper from 'swiper';

import Util from '../utils';
import {TimelineMax, TweenMax} from 'gsap/all';

import Icon from '../components/Icon';
//import BreadCrumb from '../components/BreadCrumb';

export default class Story extends React.Component {
constructor(props) {
super(props);

this.prev = this.prevSection.bind(this);
this.next = this.nextSection.bind(this);

this.sectionSlider = null;
this.swiper = React.createRef();
this.story = null;
this.activeSlide = null;
and i got this until now:
import React, { useState, useEffect, useLayoutEffect, createContext, useRef } from "react";
import Swiper from 'swiper';

import {TimelineMax, TweenMax} from 'gsap/all';

import Icon from '../components/Icon';

const Story = props => {

var sectionSlider = null;
var swiper = useRef();

var story = null;

var activeSlide = null;
var sectionSliderActive = false;

const storyNavigation = useRef();
const storyPagination = useRef();
const storyPaginationActive = useRef();

const [prevActive, setPrevActive] = useState(false);
The problem is that in the class component version i can use "this" keyword. in the funtional component version i cannot use this and the variable story is null in the prevSection and nextSection funtions
 
10:58 AM
you forgot to escape your code :P
makes hard to read
use ctrl+k before submitting gives this
 
class component:
import React from 'react';
import Swiper from 'swiper';

import Util from '../utils';
import {TimelineMax, TweenMax} from 'gsap/all';

import Icon from '../components/Icon';
//import BreadCrumb from '../components/BreadCrumb';

export default class Story extends React.Component {
constructor(props) {
super(props);

this.prev = this.prevSection.bind(this);
this.next = this.nextSection.bind(this);

this.sectionSlider = null;
this.swiper = React.createRef();
this.story = null;
this.activeSlide = null;
import React, { useState, useEffect, useLayoutEffect, createContext, useRef } from "react";
import Swiper from 'swiper';

import {TimelineMax, TweenMax} from 'gsap/all';

import Icon from '../components/Icon';

const Story = props => {

var sectionSlider = null;
var swiper = useRef();

var story = null;

var activeSlide = null;
var sectionSliderActive = false;

const storyNavigation = useRef();
const storyPagination = useRef();
const storyPaginationActive = useRef();

const [prevActive, setPrevActive] = useState(false);
I hope this ist what you menat
 
the indentation should be preserved. but it doesn't :/
whelp gotcha read it soon. I'm busy with something atm
 
11:36 AM
@GunthervonGoetzenSanchez the solution is kinda straigthforward tho :P
React provides the properties to you
did you consult this page: medium.com/@PhilipAndrews/…
 
11:58 AM
I will read the article :P
 
12:43 PM
i tried this but didnt work:
const nextSection  = props => {
    if (props.story !== null) {
		props.story.slideNext();
    }
}
 

last day (15 days later) »