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 — Valdemar Vreeman, Feb 07 '20 at 07:42
how did you import `Slideshow`, may be you are using like `import Slideshow from '../../`, try importing as `import {Slideshow} from '../../....` — Akhil Aravind, Feb 07 '20 at 07:49
@AkhilAravind import { Slideshow } from '../components/slideshow' — Valdemar Vreeman, Feb 07 '20 at 07:52
remove the if block and check whether you can render the component — Akhil Aravind, Feb 07 '20 at 07:54
@AkhilAravind See my answer below the reaction of Muhammad. He render it perfectly — Valdemar Vreeman, Feb 07 '20 at 07:55
could be a typo. Why `! currentImage`? Seems the condition `!currentImage >= partners.length` will always be false. — Joseph D., Feb 07 '20 at 08:36
@JosephD.Yea stupid me, because I was trying everthing. Even if I try `currentImage >= partners.length`, I still get nothing. — Valdemar Vreeman, Feb 07 '20 at 08:43
Does this answer your question? [if-else statement inside jsx: ReactJS](https://stackoverflow.com/questions/44046037/if-else-statement-inside-jsx-reactjs) — Emile Bergeron, Feb 07 '20 at 15:25

Rkv88 - Kanyan · Accepted Answer · 2020-02-07T09:03:27.483

1

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 07 '20 at 09:03

answered Feb 07 '20 at 08:48

Rkv88 - Kanyan

1,332
2
7
15

Thank you very much! this one helped me out! I only changed the 33.333% to 100% – Valdemar Vreeman Feb 07 '20 at 09:06

Muhammad Haseeb · Answer 2 · 2020-02-07T08:15:09.347

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)

I have updated the answer, you was not exporting your component as default that was the issue. — Muhammad Haseeb, Feb 07 '20 at 07:44
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. — Valdemar Vreeman, Feb 07 '20 at 07:52
When you are at the last image the length would be 6 right? what will be the value of currentImage? — Muhammad Haseeb, Feb 07 '20 at 08:12
That's exactly what I've done right now. The length is 5, because there are 6 photo's in const partners. — Valdemar Vreeman, Feb 07 '20 at 08:15
I mean... that was the same response when I asked my question. Nothing changed yet. — Valdemar Vreeman, Feb 07 '20 at 08:19

Christian Fosli · Answer 3 · 2020-02-07T08:50:52.103

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>
                )
            }
        })()}

if statement does nothing while checking

3 Answers3