CODEWITHSUNDEEP
reactjs
Ayush Srivastava
Ayush Srivastava

Reputation: 304

Variable is not taking the initial value of a variable in Reactjs

I am making a image viewer in reactjs. Actually I want when a user click on a rotate icon the image is rotate about 90 deg. All thing is going well but main problem is like when I click on any image and rotate it and close it and after that if I opens other it takes the previous rotation value but it must be zero as I initializes.

class GalleryModal extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            rotation: 0
          };
          this.rotate = this.rotate.bind(this);
          this.fullScreen = this.fullScreen.bind(this);
        }

        render() {
          const { rotation } = this.state;
          if (this.props.isOpen === false) {
            return null;
          }

          return (
            <div className="modal-overlay" name={this.props.name}>
              <div className="modal-body" id="image_container">

                <img
                  className="center_image"
                  id="image"
                  src={this.props.src}
                  style={{ transform: `rotate(${rotation}deg)` }}
                />
                <a href="#" className="fullscreen button" onClick={this.fullScreen}>
                    <i className="fas fa-compress-arrows-alt"></i>
                </a>
                <a href="#" className="button" onClick={() => this.rotate()}>
                  <i className="fas fa-sync-alt" />
                </a>
                <a href="#" className="button" onClick={this.props.onPrev}>
                  <i className="fas fa-angle-left" />
                </a>
                <a href="#" className="button" onClick={this.props.onNext}>
                  <i className="fas fa-angle-right" />
                </a>
                <a
                  className="modal-close"
                  href="#"
                  onClick={this.props.onClick}
                >
                  <span className="fa fa-times" />
                </a>

              </div>
            </div>
          );
        }
        rotate() {
          let newRotation = this.state.rotation + 90;
          if (newRotation >= 360) {
            newRotation = -360;
          }
          this.setState({
            rotation: newRotation
          });
        }

        fullScreen() {
          let elem = document.getElementById("image_container");
          if (elem.requestFullscreen) {
            elem.requestFullscreen();
          } else if (elem.mozRequestFullScreen) {
            /* Firefox */
            elem.mozRequestFullScreen();
          } else if (elem.webkitRequestFullscreen) {
            /* Chrome, Safari & Opera */
            elem.webkitRequestFullscreen();
          } else if (elem.msRequestFullscreen) {
            /* IE/Edge */
            elem.msRequestFullscreen();
          }
        }
      }

Demo here This is what I tried so for but it is taking the previous value when I click another image or next/prev icon but rotation must be zero as I declared rotation:0 . I doesn't know from where the rotation error is arrised as I think i did it correct.Can you please tell me what I am doing wrongand How to solve it????

Upvotes: 1

Views: 182

Answers (2)

Jolly
Jolly

Reputation: 1768

The problem is that, when you set the state having rotation: 0, you are modifying the state of the Gallery component; thus, when you open the model, Gallery Component has its own this.state.rotation variable set to 0.

Instead, the rotation that is used to show the image is the one in GalleryModal Component, which is never set to 0 again.

A solution could be to pass the this.state.rotation variable from Gallery Component to GalleryModal Component.

There it is your fiddle fixed: https://jsfiddle.net/3hywna07/

Furthermore, at line 61, instead of writing:

<a href="#" className="button" onClick={() => this.props.rotate()}>

Just write:

<a href="#" className="button" onClick={this.props.rotate}>

Using arrow function inside the render() method should be avoided because it would led to the creation of the function each time the render() method is executed.

update link:- https://jsfiddle.net/c0qpk5wv/2/

Upvotes: 3

Najarana
Najarana

Reputation: 71

Matteo got it right. You could also let the modal itself keep the rotation and create a close function which will set rotation to 0 before calling the supplied close function. Gallery shouldn't be interested in the rotation as there is little value in keeping rotation between images.

Upvotes: 0

Related Questions