<div id="app"></div>
.parentComponent {
  &__list {
    padding: 0;
  }
}

.childComponent {
  display: flex;
  margin-bottom: 10px;
  padding: 10px;
  background: #e5e5e5;
  list-style: none;
  align-items: center;
  
  &__link {
    color: #888;
    text-decoration: none;
  }
  
  &__image {
    margin: 20px;
  }
  
  &__figure {
    margin: 0;
  }
}
View Compiled
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')
);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js