Cannot read property '__reactAutoBindMap' of undefined

[tBaxter]

I'm sure this is just me, as I'm still pretty new to React, but I cannot get this working.

No matter what I do, I'm seeing "Uncaught TypeError: Cannot read property '__reactAutoBindMap' of undefined" and it is often accompanied by "Warning: Something is calling a React component directly. Use a factory or JSX instead."

Here's the simplest version of the code I've tried (although I've tried many variations:

import React from 'react';
import { render } from 'react-dom';
import Tabs from 'faster-react-tabs';

var YourThing = React.createClass({
    render() {
        const sections = [
             {
                  title: 'Tab 1',
                  content: 'Tab 1 content'
             },
            {
                title: 'Tab 2',
                content: 'Tab 2 content'
            },
        ];
        return (
          <Tabs sections={sections} />
        );
    }
});

render(
       <YourThing />,
       document.getElementById('detail-wrapper')
);

React (and react-dom) is ^15.1.0

[tBaxter]

Asking around, it appears this is due to this project not being updated for React 0.14+?

[tBaxter]

Update 2: for reasons that are embarrassing and silly, I can't provide a PR, but I did get this working by updating the methods in tabs and tab-list

const TabList = React.createClass({
  propTypes: {
    sections: React.PropTypes.array.isRequired,
    selectedIndex: React.PropTypes.number
  },

  getDefaultProps: function () {
    return {
      selectedIndex: 0
    };
  },

  render: function () {
    const { sections, selectedIndex } = this.props;

    return (
      <ul role='tablist'>
        {sections.map((section, index) =>
          <Tab
            key={`tab-${section.id || index}`}
            id={'tab-' + (section.id || `panel-${index}`)}
            isSelected={selectedIndex === index}>
              {section.title}
          </Tab>
        )}
      </ul>
    );
  }
});

and

const Tabs = React.createClass({
  propTypes: {
    sections: React.PropTypes.array.isRequired,
    initialIndex: React.PropTypes.number
  },

  getDefaultProps: function () {
    return {
      initialIndex: 0
    };
  },

  targets: new Map(),
  indexes: new Map(),

  getInitialState: function () {
    return {
      JS: false,
      selectedIndex: this.props.initialIndex
    };
  },

  componentDidMount: function () {
    this.setState({ JS: true });

    // Set up initial hash/index mapping
    this.props.sections.forEach((section, index) => {
      let query = '#' + (section.id || `panel-${index}`);
      this.targets.set(query, index);
      this.indexes.set(index, query);
    });

    // Handle hash change
    window.addEventListener('hashchange', this.handleHash, false);

    // Handle initial index (if no hash already)
    if (this.props.initialIndex && !window.location.hash) {
      window.location.hash = this.indexes.get(this.props.initialIndex);
    }

    // Initial hash handling
    this.handleHash();
  },

  componentWillUnmount: function () {
    window.removeEventListener('hashchange', this.handleHash, false);
  },

  handleHash: function () {
    if (!window) return;

    this.showSection(this.targets.get(window.location.hash) || 0);
  },

  showSection: function (index) {
    this.setState({ selectedIndex: index });
  },

  render: function () {
    return (
      <div>
        {this.state.JS
          ? <TabList {...this.props} {...this.state} />
          : null}
        <PanelList {...this.props} {...this.state} />
      </div>
    );
  }
});

I'm not seeing any further problems once these changes are in place.

[martinbethann]

Just wondering if this project was still active? It appears as though this error is still breaking the component.

[eschaefer]

@martinbethann @tBaxter I'll be taking a look at this momentarily.