class Animal extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      width: 0,
      height: 0,
      src: props.src
    }
    console.log('/*** constructor(props) ***/');
  }
  
  static getDerivedStateFromProps (nextProps, prevState) {
    console.log('/*** getDerivedStateFromProps(nextProps, prevState) ***/');
    
    if (prevState.src !== nextProps.src) {
      // necesario para actualizar la imagen cada vez que cambie this.props.src
      return { src: nextProps.src };
    }
    
    return null;
  }
  
  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.state.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);
   }
}



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] };
  }


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

    this.setState({
      src: animalSrc
    });
  };
  
  render() {
    return (
      <div>
        <p>Url de img: {this.state.src}</p>
        <Animal src={this.state.src}/>
        <button onClick={this.cambiarAnimal}>Cambiar animal</button>
      </div>
    );
  }
}

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