Bdtjtk

As of now, I can display an image the user uploads onto the browser like so.

if (redirectToStackAfterPhotoSubmit) {

        return (

            <Stack

                imagesOnStack={this.state.url || 'http://via.placeholder.com/400x300'}

                alt="Uploaded Images"

                height="300"

                Width="400"

            />

        );

    }

But this time, I want the user to have the ability to go the next or previous picture with the click of a button. I'm aware my attempt is trying to make a list, I only made it this way just to get idea of what I'm working with.

Directly below is my attempt, What am I doing wrong and how can I fix it?

Here's Upload.js (didn't post everything because it's a large file)

     this.state = {

           url: '',

           picture: ,

           selectedPictureIndex: 0

        };



     render() {

        const redirectToStackAfterPhotoSubmit = this.state.redirectToStackAfterPhotoSubmit;



        const { picture } = this.state;



        const picList = picture.map(pic => {

            return(

                <li key={pic.id}>{this.state.url[pic]}</li>

            );

        });



        if (redirectToStackAfterPhotoSubmit) {

            return (

                <Stack

                    imagesOnStack={picList || 'http://via.placeholder.com/400x300'}

                    alt="Uploaded Images"

                    height="300"

                    Width="400"

                />

            );

        }

    }

Here's Stack.js:

import React, { Component } from 'react';



class Stack extends Component {

    toggleNext() {

        console.log("clicked toggleNext()");

        if(this.state.selectedPicture === this.state.picture.length - 1) {

            return;

        }



        this.setState(prevState => ({

            selectedPicture: prevState.selectedIndex + 1

        }));

    }



    togglePrevious() {

        console.log("clicked togglePrevious()");

        if(this.state.selectedPicture === 0) {

            return;

        }



        this.setState(prevState => ({

            selectedPicture: prevState.selectedPicture - 1

        }));

    }



    render() {

        return(

            <div>

                <img src={this.props.imagesOnStack} alt=""/>

                <button onClick={this.toggleNext}>Next</button>

                <button onClick={this.togglePrevious}>Prev</button>

            </div>

        );

    }

}



export default Stack;

For react native, here is a npm package that uses the swipe deck: react-native-swipe-card.

Github Repos: https://github.com/EQuimper/MyOwnChallenge-RnMovieTinder Packages: https://github.com/meteor-factory/react-native-tinder-swipe-cards

For React, you can use react-swipe-card

import Cards, { Card } from 'react-swipe-card'





const data = ['Alexandre', 'Thomas', 'Lucien']



const Wrapper = () => {

  return (

      <Cards onEnd={action('end')} className='master-root'>

        {data.map(item => 

          <Card 

            onSwipeLeft={action('swipe left')} 

            onSwipeRight={action('swipe right')}>

            <h2>{item}</h2>

          </Card>

        )}

      </Cards>

  )

}