Bonfire rendering sidepanel correctly.

common/components/bonfires/Bonfires.jsx

@@ -19,10 +19,11 @@ var Bonfire = React.createClass({
 
   render: function() {
     var {
+      name,
       difficulty,
       description
     } = this.state;
-    var brief = description.shift();
+    var brief = description.slice(0, 1).pop();
 
     // convert bonfire difficulty from floating point string
     // to integer.
@@ -32,9 +33,10 @@ var Bonfire = React.createClass({
       <Grid>
         <Row>
           <SidePanel
-            difficulty={ difficulty }
+            name={ name }
             brief={ brief }
-            description={ description }/>
+            difficulty={ difficulty }
+            description={ description.length > 1 ? description : [] }/>
           <Col
             xs={ 12 }
             md={ 8 }>

common/components/bonfires/SidePanel.jsx

@@ -9,6 +9,7 @@ var React = require('react'),
 var SidePanel = React.createClass({
 
   propTypes: {
+    name: React.PropTypes.string,
     brief: React.PropTypes.string,
     description: React.PropTypes.array,
     difficulty: React.PropTypes.number
@@ -48,7 +49,7 @@ var SidePanel = React.createClass({
       return (
         <i
           key={ num }
-          className={ className } />
+          className={ className }/>
       );
     });
   },
@@ -75,7 +76,7 @@ var SidePanel = React.createClass({
         xs={ 12 }
         md={ 4 }>
         <div>
-          <h1 classNameName='text-center'>Meet Bonfire</h1>
+          <h1 classNameName='text-center'>{ this.props.name }</h1>
           <h2 classNameName='text-center'>
             <div classNameName='bonfire-flames'>
               Difficulty:&nbsp;

common/components/bonfires/Store.js

@@ -19,8 +19,9 @@ var BonfiresStore = Store.create({
 
     return [
       setBonfire
-        .map(function({ description, difficulty}) {
+        .map(function({ name, description, difficulty}) {
           return {
+            name,
             description,
             difficulty
           };