-3

I am trying to change from React.createClass to React.Component, but I am getting below error.

Uncaught TypeError: Cannot read property 'state' of undefined

I googled for the error but an not able to figure it out

class Accordion extends React.Component {
TylerH
  • 20,799
  • 66
  • 75
  • 101

3 Answers3

1

You need to bind this.

this.onSelect -> this.onSelect.bind(this)

this.enhanceSection -> this.enhanceSection.bind(this)

Kim
  • 5,045
  • 6
  • 38
  • 60
  • Hey that one got fixed but I am getting child undefined error here id = child.props.id; –  Apr 27 '17 at 17:24
  • can you tell the reason it will help in understanding –  Apr 27 '17 at 22:31
1

You need to bind your onSelect to the class in the constructor:

constructor(props) {
    super(props);
    this.state = {
        selected: props.selected // use props, not this.props
    };
    this.onSelect = this.onSelect.bind(this);
}

The extends syntax no longer has autobinding like createClass did.

imjared
  • 19,492
  • 4
  • 49
  • 72
  • Hey that one got fixed but I am getting child undefined error here id = child.props.id; –  Apr 27 '17 at 16:38
  • @im can you tell the reason it will help in understanding –  Apr 27 '17 at 22:31
0

You need to bind this.onSelect If you forget to bind this.onSelect and pass it to onClick, this will be undefined when the function is actually called.

Try this:

class SectionAccordion extends React.Component {

      constructor(props){
        super(props);
        this.onSelect  = this.onSelect.bind(this);
      }

      onSelect() {

        this.props._onSelect(this.props.id);
      }

      render() {

            console.log("accordion / the Accordion Section component");
            var className = 'accordion-section' + (this.props._selected ? ' selected' : '');

            return (
                <div className={className}>
                    <h3 onClick={this.onSelect}>
                        {this.props.title}
                    </h3>

                    <div className="up-arrow"></div>



                    <div onClick={this.onSelect} className="body">
                        {this.props.children}
                    </div>
                </div>
            );

      }

    }

Update:

You can bind the context using arrow function as well ; like this:

onSelect = () => {
   // code goes here
}
Bhavya Sinha
  • 112
  • 3
  • Hey that one got fixed but I am getting child undefined error here id = child.props.id; –  Apr 27 '17 at 17:25
  • can you tell the reason it will help in understanding –  Apr 27 '17 at 22:37
  • In `JavaScript`, `class` methods are not bound by default. If you forget to `bind this.onSelect ` and pass it to `onClick`, this will be `undefined` when the `function` is actually called. This is not React-specific behavior, it is a part of how functions work in `JavaScript`. Generally, if you refer to a method without () after it, such as `onClick={this. onSelect}`, you should `bind` that method.. – Bhavya Sinha Apr 28 '17 at 06:38