React bootstrap - Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

Question

My class is as follows:

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 (
                    <Input type="text" placeholder="testing" label="label" />
                );
            });
            return (
                <div>
                    <form action="">
                        {formFieldList}
                    </form>

                </div>
            );
        }
    }

If I replace <Input /> with <input /> then there's no error.

The stacktrace only shows my app.jsx which is not useful.

What is wrong?

Mike Driver Mike Driver · Accepted Answer · 2015-09-01T10:39:24

You need to de-structure your import of the Input jsx component.

import {Input} from 'react-bootstrap';

What this does is render to var Input = require('react-bootstrap').Input; Whereas what you previously had would render to var Input = require('react-bootstrap');

It does mention this in the documentation for React Bootstrap here:

https://react-bootstrap.github.io/getting-started.html#es6

Edit: A good hint is that the error you're getting from React is a typical error when you're trying to render as a component, something which is actually not a react component. So basically you were trying to render the object that react bootstrap returns containing all components, rather than the actual input component you wanted.

React bootstrap - Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

1 Answers