CODEWITHSUNDEEP
reactjsarraylistecmascript-6
Alex
Alex

Reputation: 467

ReactJS Load Images on Click

Hello im trying to make an image changer. at first load i should get displayed the first image in the state. if click on the button the image should be changed to second and so on. the problem right now is get displayed both images with buttons

here is my bin : enter link description here

Upvotes: 0

Views: 2249

Answers (2)

Ashrant Kohli
Ashrant Kohli

Reputation: 83

http://bl.ocks.org/piotrf/1b7b14b0c2bfbfe1f1ef this is almost exactly what you want. You can just get rid of the parts you dont need and change the buttons to the images you want

Upvotes: 1

Ji aSH
Ji aSH

Reputation: 3457

Because you display the 2 image in your renderer.

Heres an idea how to do it (with no animation, I dont know the CSSTransitionGroup component). Just replace your main.js code withthe following

import React from 'react'
import {render} from 'react-dom'
import { CSSTransitionGroup } from 'react-transition-group'



class FadeImage extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      images: [
        'http://via.placeholder.com/350x150',
        'http://via.placeholder.com/350x151'
      ],
      currentImage: 0
    };
  }

  fadeImage(e) {
    e.preventDefault();
    this.setState({currentImage: (this.state.currentImage + 1) % this.state.images.length})
  }

  render() {
    return (
            <div className="image">
      <CSSTransitionGroup
        transitionName="example"
        transitionEnterTimeout={300}
        transitionLeaveTimeout={300}
        >
          <section>
            <button className="button" onClick={this.fadeImage.bind(this)}>Click!</button>
            <img src={this.state.images[this.state.currentImage]}/></section>
        </CSSTransitionGroup>
        </div>
      );
    }
  }


render(<FadeImage />, document.querySelector('#app'))

Upvotes: 2

Related Questions