chore(core|templates): Use React.Children to manage opaque prop data (r…

…eact-boilerplate#815)

* chore(core): Use React.Children helpers for opaque props

* fix(Button): small nit, tidy Button code

* chore(internals): Update app template

app/components/Button/index.js

@@ -6,7 +6,7 @@
  * otherwise it'll render a link with an onclick
  */
 
-import React, { PropTypes } from 'react';
+import React, { PropTypes, Children } from 'react';
 
 import styles from './styles.css';
 
@@ -15,13 +15,17 @@ function Button(props) {
 
   // Render an anchor tag
   let button = (
-    <a className={className} href={props.href} onClick={props.onClick}>{props.children}</a>
+    <a className={className} href={props.href} onClick={props.onClick}>
+      {Children.toArray(props.children)}
+    </a>
   );
 
   // If the Button has a handleRoute prop, we want to render a button
   if (props.handleRoute) {
     button = (
-      <button className={className} onClick={props.handleRoute} >{props.children}</button>
+      <button className={className} onClick={props.handleRoute}>
+        {Children.toArray(props.children)}
+      </button>
     );
   }
 

app/containers/App/index.js

@@ -32,7 +32,7 @@ function App(props) {
       <A className={styles.logoWrapper} href="https://twitter.com/mxstbr">
         <Img className={styles.logo} src={Banner} alt="react-boilerplate - Logo" />
       </A>
-      {props.children}
+      {React.Children.toArray(props.children)}
       <Footer />
     </div>
   );

app/containers/LanguageProvider/index.js

@@ -16,7 +16,7 @@ export class LanguageProvider extends React.Component { // eslint-disable-line r
   render() {
     return (
       <IntlProvider locale={this.props.locale} messages={this.props.messages[this.props.locale]}>
-        {this.props.children}
+        {React.Children.only(this.props.children)}
       </IntlProvider>
     );
   }

docs/testing/component-testing.md

@@ -29,7 +29,7 @@ function Button(props) {
   return (
     <button className="btn" onClick={props.onClick}>
       <CheckmarkIcon />
-      { props.children }
+      { React.children.only(props.children) }
     </button>
   );
 }

internals/templates/appContainer.js

@@ -24,7 +24,7 @@ export default class App extends React.Component { // eslint-disable-line react/
   render() {
     return (
       <div className={styles.container}>
-        {this.props.children}
+        {React.children.toArray(this.props.children)}
       </div>
     );
   }

internals/templates/languageProvider/languageProvider.js

@@ -16,7 +16,7 @@ export class LanguageProvider extends React.Component { // eslint-disable-line r
   render() {
     return (
       <IntlProvider locale={this.props.locale} messages={this.props.messages[this.props.locale]}>
-        {this.props.children}
+        {React.children.only(this.props.children)}
       </IntlProvider>
     );
   }