Step-6 Optional thumbnail border

App.js

...

const Thumbnail = styled.img`
  flex-grow: 1;
  width: 300px;
  height: 250px;
  padding: 5px;
  margin: 15px;
  ${props => {
    if (props.showBorder) {
      return `
        border: 1px solid ${mainColor};
        border-radius: 8px;
      `;
    }
  }}
`;

class App extends Component {
  render() {
    const thumbnails = Array.from({ length: 5 }, (_, index) => {
      const showBorder = index % 2 === 0;
      return <Thumbnail key={index + 1} src={require(`../assets/thumbnail-${index + 1}.jpeg`)} showBorder={showBorder} />;
    });

    return (
      <div className={this.props.className}>
        <Title color={mainColor}>Mystagram</Title>
        <Gallery>
          {thumbnails}
        </Gallery>
      </div>
    );
  }
}

...