Simple react problem

README.md

Problem:

Create a React class or set of classes to display a list of images so they space out and align evenly no matter how wide the screen resolution is. Example:

| [image]   [image]   [image] |
| [wide image]   [wide image] |
| [image]   [image]   [image] |

Bonus:

Bonus points if you can add a click handler when one of the images is clicked it toggles hiding all of the other images. Example first click hides the other images, second click restores the other images.

Given

A list of images: var imageList = [...]

Source

The source example is located in the following sites.

• JS Fiddle: https://jsfiddle.net/josgraha/zgqssgmh
• JS Bin: https://jsbin.com/cetotu/edit?html,js,output

The source code is also pasted in the Gist below.

Solution Requirements

Either update the JS Fiddle or provide a project with a valid package.json

index.html

<!-- Note this HTML is incomplete -->

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

index.js

// TODO: use the imageList array below to display a list of images
var imageList = [
  {   
    src: 'https://farm9.staticflickr.com/8714/27922426040_ba10e55d26_m.jpg',
    caption: 'Image 1'
  },
  {
    src: 'https://farm8.staticflickr.com/7725/27922426410_875b64a87d_m.jpg',
    caption: 'Image 2'
  },
  {
    src: 'https://farm9.staticflickr.com/8565/27922426740_8ceb9f3cb9_m.jpg',
    caption: 'Image 3'
  },
  {
    src: 'https://farm9.staticflickr.com/8859/27922426850_3fe1ae0654_m.jpg',
    caption: 'Image 4'
  },
  {
    src: 'https://farm8.staticflickr.com/7290/27922426990_477faabb0b_m.jpg',
    caption: 'Image 5'
  },
  {
    src: 'https://farm9.staticflickr.com/8568/27922427340_df159d67b0_m.jpg',
    caption: 'Image 6'
  }
];

// TODO: modify the render method to display the list 
var PhotoViewer = React.createClass({
	rows: [],
  render: function() {
  	return (<div>a list of images goes here</div>);
  }
});

ReactDOM.render(
  <PhotoViewer images={imageList} />,
  document.getElementById('container')
);