Multi Column Photo component

index.jsx

import React      from 'react';
import Store      from './photos.store'
import Photo      from './photos.photo'
import PhotoGrid  from './photos.grid'

export default React.createClass({
  displayName: 'PhotosIndex', 
  
  componentWillMount() {
    this.setState({
      photos: Store.fetchPhotos() // TODO: Paging.
    })
  },
  
  render () {
    <PhotoGrid>
      {this.state.photos.map((photo) => {
        let url     = photo.medium.url;
        let width   = photo.medium.width_px;
        let height  = photo.medium.height_px;

        return <Photo src={url} width={width} height={height} isViewable={true} />
      })}
    </PhotoGrid> 
  }
});

photos.grid.jsx

import React from 'react';


export default React.createClass({
  displayName: 'PhotosGrid', 
  
  render () {
    let Styles = {
      Wrapper: {
        display: 'flex',
        width: '100%',
        padding: '1rem'
      },
      Column: {
        width: '33%',
        marginRight: '1rem'
      },
      LastColumn: {
        width: '33%'
      }
    }

    return (
      <div style={Styles.Wrapper}>
        <div style={Styles.Column}>{this.renderPhotos(0)}</div>
        <div style={Styles.Column}>{this.renderPhotos(1)}</div>
        <div style={Styles.LastColumn}>{this.renderPhotos(2)}</div>
      </div>
    )
  }

  , renderPhotos (col) { 
    let photos = [];
    
    for (let i = col; i <= this.props.children.length + col; i += 3) {
      let photo = this.props.children[i];
      photos.push(photo);
    }

    return photos;
  }
})