title: React bootstrap - Uncaught TypeError: Cannot read property 'toUpperCase' of undefined
body: <p>My class is as follows:  </p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import Input from 'react-bootstrap';
      export default class FormWidget1 extends React.Component {
          render() {    
              if (!this.props.fields) {
                  console.log('no fields passed');
              }
              else {
                  console.log(this.props.fields.length);
                  console.log(this.props.fields);
              }
  
              var formFieldList = this.props.fields.map(function(field) {
                  console.log("iterating");
                  return (
                      &lt;Input type="text" placeholder="testing" label="label" /&gt;
                  );
              });
              return (
                  &lt;div&gt;
                      &lt;form action=""&gt;
                          {formFieldList}
                      &lt;/form&gt;
  
                  &lt;/div&gt;
              );
          }
      }
  </code></pre>
  
  <p>If I replace <code>&lt;Input /&gt;</code> with <code>&lt;input /&gt;</code> then there's no error.  </p>
  
  <p>The stacktrace only shows my app.jsx which is not useful.  </p>
  
  <p>What is wrong?</p>