Getting - Uncaught TypeError: Cannot read property 'state' of null - pointing to add method var arr = this.state.comments;

Question

import React from 'react';
import Comment from './comment';

export
default class Board extends React.Component {
  constructor(props) {
    super(props)
      // console.log(props)
    this.state = {
      comments: []
    };
    console.log(this.state)

  }
  add(text) {
    var arr = this.state.comments;
    arr.push(text);
    this.setState({
      comments: arr
    })
  }
  removeComment(i) {

    var arr = this.state.comments;
    arr.splice(i, 1);
    this.setState({
      comments: arr
    })
  }

  updateComment(newText, i) {
    var arr = this.state.comments;
    arr[i] = newText;
    this.setState({
      comments: arr
    })
  }
  eachComment(text, i) {
    return ( < Comment key = {
        i
      }
      index = {
        i
      }
      updateCommentText = {
        this.updateComment
      }
      deleteFromBoard = {
        this.removeComment
      } > {
        text
      } < /Comment>
            );
    }
    render (){
        return(
            <div>
                <button onClick={this.add.bind(null,'Add Note')} className="button-info create">Add New</button >
      < div className = "board" > {
        this.state.comments.map(this.eachComment)
      } < /div>
            </div >
    )
  }
}

Try `this.add.bind(this,'Add Note')` instead of `this.add.bind(null,'Add Note')`. — Fabian Schultz, Nov 29 '16 at 22:22
Thanks for the quick response Fabian. That did help! Bro this is a struggle learning react, any suggestions. You can see what I'm struggling on. Just stick with it huh? — Seena Khoee, Nov 29 '16 at 22:27
Glad I could help. React is very different and it just takes some time to get used to. But after some time working with it odds are you don't want to go back. Just keep coding! — Fabian Schultz, Nov 29 '16 at 22:33
Okay brotha. Appreciate the feedback. I'm getting an error right now, seems to be similar concept which I have diffuclty understanding. Says board.js:72 Uncaught TypeError: Cannot read property 'updateComment' of undefined you now why? — Seena Khoee, Nov 29 '16 at 22:42
You need to bind `this` again. Try using `this.eachComment.bind(this)`. — Fabian Schultz, Nov 29 '16 at 22:45
Ahh man... appreciate it... Very frustrated. Okay i'm going to be patient and see whats going on and understand bind.. thats whats killing me huh. Alright brotha ima struggle a bit and see whats going on. Thanks again! — Seena Khoee, Nov 29 '16 at 22:49
Binding is almost like passing parameters to a function. If you want to use `this` inside the `add` method, you need to pass/bind it. I'm sure there's a lot of information about it on here or online in general. — Fabian Schultz, Nov 29 '16 at 22:51

score 0 · Answer 1 · edited May 23 '17 at 12:13

0

The this keyword in JavaScript is based on how the code that contains it is called. That means that the object it is bound to can change from invocation to invocation.

Please see this for details.

edited May 23 '17 at 12:13

Community

1
1

answered Nov 29 '16 at 22:24

Scott Marcus

64,069
6
49
71

Thanks Scott for that info, still trying to get a grasp of react and JS OOP. Huge help! – Seena Khoee Nov 29 '16 at 22:28

score 0 · Answer 2 · answered Nov 29 '16 at 22:37

0

Hmmm now its saying

board.js:72 Uncaught TypeError: Cannot read property 'updateComment' of undefined

why is this so hard for me to debug....

answered Nov 29 '16 at 22:37

Seena Khoee

29
1
8

Getting - Uncaught TypeError: Cannot read property 'state' of null - pointing to add method var arr = this.state.comments;

2 Answers2