if statement does nothing while checking

Question

I'm working on a photo slider, but an if statement doesn't work... I've got 2 if statement. One if statement works perfectly, while the other one does nothing.

Code:

import React, {useState} from "react"

export const Slideshow = () => {
    const partners = ["/partners/logo_wp.jpg", "/partners/logo_van_leeuwen.png",     "/partners/logo_kennelservices.png", "/partners/logo_beckhuis.jpg",     "/partners/logo_kabeldirect.png", "/partners/logo_kremer.png"];

const [currentImage, setCurrentImage] = useState(0);

return (
    <div style={{position: "relative"}}>
        <div style={{
            display: "flex",
            transform: `translateX(-${currentImage * 100}%)`,
            transition: "transform .25s ease"
        }}>
            {partners.map(partner => <div
                style={{flexBasis: "33.333%", flexShrink: 0, display: "flex", justifyContent: "center"}}>
                <img src={partner} style={{
                    height: '120px'
                }}/>
            </div>)}
        </div>

        {(() => {
            if (!currentImage <= 0) {
                return (
                    <button className={'prev-photo'}
                            style={{position: "absolute", left: 0, top: "50%", transform: 'scale(2)'}}
                            onClick={() => setCurrentImage(currentImage - 1)}>&lt;
                    </button>
                )
            }
        })()}

        {(() => {
            if (!currentImage >= partners.length) {
                return (
                    <button className={'next-photo'}
                            style={{position: "absolute", right: 0, top: "50%", transform: 'scale(2)'}}
                            onClick={() => setCurrentImage(currentImage + 1)}>&gt;</button>
                )
            }
        })}

        <div style={{textAlign: 'center'}}>
            {(currentImage + 1) + '/' + partners.length}
        </div>
    </div>
)
};

Here you've my code. The last if statement does nothing. I hope someone can figure out where the error occurs. Thank you in advance.

@MuhammadHaseeb warn "export 'default' (imported as 'Slideshow') was not found in warn "export 'default' (imported as 'Slideshow') was not found in warn "export 'default' (imported as 'Slideshow') was not found in — user11461061
– user11461061, Commented Feb 7, 2020 at 7:42
how did you import Slideshow, may be you are using like import Slideshow from '../../, try importing as import {Slideshow} from '../../.... — Akhil Aravind
– Akhil Aravind, Commented Feb 7, 2020 at 7:49
@AkhilAravind import { Slideshow } from '../components/slideshow' — user11461061
– user11461061, Commented Feb 7, 2020 at 7:52
remove the if block and check whether you can render the component — Akhil Aravind
– Akhil Aravind, Commented Feb 7, 2020 at 7:54

Rkv88 - Kanyan · Accepted Answer · 2020-02-07 09:03:27Z

0

Hi this answer works

see the code live :

https://codesandbox.io/s/gallant-mountain-18yu8?fontsize=14&hidenavigation=1&theme=dark

you need to add () to the end of the JSX function for the right arrow

also use this conditions instead

if (currentImage < partners.length-1) {

and

if (currentImage > 0) {

edited Feb 7, 2020 at 9:03

answered Feb 7, 2020 at 8:48

Rkv88 - Kanyan

1,3222 gold badges9 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user11461061 Over a year ago

Thank you very much! this one helped me out! I only changed the 33.333% to 100%

Muhammad Haseeb · Accepted Answer · 2020-02-07 08:15:09Z

0

When you do not export your component as default you can not default import it. either you can import it as;

import {SlideShow} from 'SlideShow';

Or export it as default

const Slideshow = () => {
    const partners = ["/partners/logo_wp.jpg", "/partners/logo_van_leeuwen.png",     "/partners/logo_kennelservices.png", "/partners/logo_beckhuis.jpg",     "/partners/logo_kabeldirect.png", "/partners/logo_kremer.png"];

const [currentImage, setCurrentImage] = useState(0);

return (
    <div style={{position: "relative"}}>
        <div style={{
            display: "flex",
            transform: `translateX(-${currentImage * 100}%)`,
            transition: "transform .25s ease"
        }}>
            {partners.map(partner => <div
                style={{flexBasis: "33.333%", flexShrink: 0, display: "flex", justifyContent: "center"}}>
                <img src={partner} style={{
                    height: '120px'
                }}/>
            </div>)}
        </div>

        {(() => {
            if (!currentImage <= 0) {
                return (
                    <button className={'prev-photo'}
                            style={{position: "absolute", left: 0, top: "50%", transform: 'scale(2)'}}
                            onClick={() => setCurrentImage(currentImage - 1)}>&lt;
                    </button>
                )
            }
        })()}

        {(() => {
            if (!currentImage >= partners.length) {
                return (
                    <button className={'next-photo'}
                            style={{position: "absolute", right: 0, top: "50%", transform: 'scale(2)'}}
                            onClick={() => setCurrentImage(currentImage + 1)}>&gt;</button>
                )
            }
        })}

        <div style={{textAlign: 'center'}}>
            {(currentImage + 1) + '/' + partners.length}
        </div>
    </div>
)
};

export default Slideshow;

Also, if currentImage starts from 0. then you have to modify your condition as

(!currentImage > partners.length)

edited Feb 7, 2020 at 8:15

answered Feb 7, 2020 at 7:36

Muhammad Haseeb

1,3611 gold badge12 silver badges24 bronze badges

6 Comments

user11461061 Over a year ago

That change nothing

Muhammad Haseeb Over a year ago

I have updated the answer, you was not exporting your component as default that was the issue.

user11461061 Over a year ago

I've already imported my Component. He shows my slider and arrows, but I don't want a arrow right if it is my last photo.

Muhammad Haseeb Over a year ago

When you are at the last image the length would be 6 right? what will be the value of currentImage?

user11461061 Over a year ago

That's exactly what I've done right now. The length is 5, because there are 6 photo's in const partners.

|

Christian Fosli · Accepted Answer · 2020-02-07 08:50:52Z

0

It appears you are not executing the function containing the second if statement.

Try to add a () at the end, such that it becomes

        {(() => {
            if (!currentImage >= partners.length) {
                return (
                    <button className={'next-photo'}
                            style={{position: "absolute", right: 0, top: "50%", transform: 'scale(2)'}}
                            onClick={() => setCurrentImage(currentImage + 1)}>&gt;</button>
                )
            }
        })()}

edited Feb 7, 2020 at 8:50

answered Feb 7, 2020 at 8:44

Christian Fosli

1,89713 silver badges15 bronze badges

Collectives™ on Stack Overflow

if statement does nothing while checking

3 Answers 3

1 Comment

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related