Creating the CollectionExportForm component

The CollectionExportForm component is responsible for exporting a collection to a third-party website (http://codepen.io). Once your collection is on CodePen, you can save it and share it with your friends. Let's take a look at how this can be done.

Create the ~/snapterest/source/components/CollectionExportForm.js file:

import React from 'react';

const formStyle = {
  display: 'inline-block'
};

const CollectionExportForm = ({ htmlMarkup }) => (
  <form
      action="http://codepen.io/pen/define"
      method="POST"
      target="_blank"
      style={formStyle}
    >
      <input type="hidden" name="data" value={htmlMarkup}/>
      <button type="submit" className="btn btn-default">
        Export as HTML
      </button>
    </form>
);

export default CollectionExportForm;

The CollectionExportForm component renders a form with the <input> and <button> elements. The <input> element is hidden, and its...