class MyComponent extends React.Component {
  constructor() {
    super();
    
    this.state = {
      directors: [],
    };
    
    this.onButtonClick = this.onButtonClick.bind(this);
  }
  
  render() {
    const directors = this.state.directors
                         .map(director => <MyChildComponent director={director} />);
    
    if (!directors.length) {
      return(
        <div>
          <h1>Parent component</h1>
          <button onClick={this.onButtonClick}>Click me!</button>
        </div>
      );
    }
    
    return (
      <div>
        <h1>Parent component</h1>
        <ul className='parentComponent__list'>
          {directors}
        </ul>
      </div>
    );
  }
  
  onButtonClick(event) {
    this.setState((prevState, props) => {
      return {
        directors: this.fetchDirectors()
      };
    });
  }
  
  fetchDirectors() {
    return [
      {name: 'George A. Romero',
       image: 'http://via.placeholder.com/50x50',
       bio: 'https://en.wikipedia.org/wiki/George_A._Romero'},
      {name: 'Tommy Wiseau',
       image: 'http://via.placeholder.com/50x50',
       bio: 'https://en.wikipedia.org/wiki/Tommy_Wiseau'},
      {name: 'Lucio Fulci',
       image: 'http://via.placeholder.com/50x50',
       bio: 'https://en.wikipedia.org/wiki/Lucio_Fulci'},
      {name: 'Uwe Boll',
       image: 'http://via.placeholder.com/50x50',
       bio: 'https://en.wikipedia.org/wiki/Uwe_Boll'},
    ]
  }
}

class MyChildComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  
  render() {
    return (
      <li className='childComponent'>
        <figure className='childComponent__figure'>
          <img src={this.props.director.image} className='childComponent__image' />
        </figure>
        <h2> 
          <a href={this.props.director.bio} className="childComponent__link" target="_blank">
            {this.props.director.name}
          </a> 
        </h2>
      </li>
    );
  }
}

ReactDOM.render(
  <MyComponent />,
  document.getElementById('app')
);