<div id="root"></div>
body {
  margin: 0;
  padding: 0;
}


.cat__img {
  transition-property: left, top;
  transition-duration: 0.5s, 0.5s;
  transition-timing-function: ease, ease;
}
class Animal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      width: 0,
      height: 0
    }
    console.log('/*** constructor(props) ***/');
  }
    
  onImgLoad = e => {
    this.setState({
      width: this.img.width,
      height: this.img.height
    });
  }
  
  render() {
    console.log('/*** render() ***/')
    const { width, height } =  this.state;
      
    return (
      <div>
        <p>Medidas de img: {width}, {height}</p>
        <img ref={elem => this.img = elem}
          className="cat__img"
          src={this.props.src}
          />
      </div>
     );
   }

   componentDidMount() {
    console.log('/*** componentDidMount() ***/')
    // setear ancho y alto de la imagen cuando esta haya cargado
    // cualquier llamada a this.setState() provocará que render() se ejecute
    this.img.addEventListener('load', this.onImgLoad);
   }

   componentWillUnmount() {
    console.log('/*** componentWillUnmount() ***/');
     this.img.removeEventListener('load', this.onImgLoad);
   }
}


class Padre extends React.Component {
  constructor(props) {
    super(props);
    this.animales = [
      'https://i.pinimg.com/236x/b2/cb/7d/b2cb7d5630eb5e5a60ed8f3e1d58e680--best-dog-food-best-dogs.jpg',
      'https://pa1.narvii.com/5816/867e0deb7c7a4b651c37b9d6164c755d1cce6d6e_128.gif',
      'https://pbs.twimg.com/profile_images/742621666027569152/m345-jkv_400x400.jpg',
      'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFxEoBS0Dlue23lz4MxyuuK0GXZwNvdueWbCLZFXwuM_xjIhhC',
      'https://is5-ssl.mzstatic.com/image/thumb/Purple122/v4/e2/e5/40/e2e5408c-ea6a-042f-78a0-38fca8534133/source/256x256bb.jpg'
    ]; 
    this.animalIndex = 0;
    this.state = { src: this.animales[this.animalIndex], desmontarImg: false };
  }


  cambiarAnimal = () => {
    this.animalIndex++;
    let animalSrc = this.animales[this.animalIndex]
    
    if (!animalSrc) {
      this.animalIndex = 0;
      animalSrc = this.animales[this.animalIndex]
    }

    this.setState({
      src: animalSrc
    });
  };

  toggleImg = () => {
    this.setState((prevState) =>({ desmontarImg: !prevState.desmontarImg }));
  };
  
  render() {
    const animal = this.state.desmontarImg ? null : (<Animal src={this.state.src}/>);
    return (
      <div>
        <p>Url de img: {this.state.src}</p>
        {animal}
        <button onClick={this.cambiarAnimal}>Cambiar animal</button>
        <button onClick={this.toggleImg}>Montar/Desmontar Img</button>
      </div>
    );
  }
}

ReactDOM.render(<Padre />, document.getElementById('root'));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.3.0/umd/react.development.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.0/umd/react-dom.development.js