score:0

i think there is no need to bind methods/functions in the constructor instead do this

return (
   <basics key={i} 
   index={i} 
   upcomment={()=>this.updatecomment()} 
   delcomment={()=>this.removecomment()}>
       {text}
   </basics>)

while assigning the props wrap your functions into anonymous functions it may help i didn't try this.

score:0

one issue is that .bind() call at global attribute event would result in function () { [native code] } instead of the function call, and this is the global object, for example window.

one approach would be to define edit and remove as static methods and use the class as a reference

class test {
  constructor() {}
  static edit() { console.log("edit") }
  rendernormal() {
    const button = `<div onclick="test.edit()">click</div>`;
    document.body.insertadjacenthtml("beforeend", button);
  }
}

new test().rendernormal()

score:1

your function name is updatecomment while defining the function but when you're binding the context of the class to the function, the name you're using is upcomment (class manage, 3rd line in it's constructor) which is why you're getting the error.

score:2

there are multiple errors in your code that needed solving.

  1. the bind error is because upcomment does not exist in your code. what you should bind is the function itself (updatecomment) and not the prop name.
  2. if you are using this variable inside any function, it needs to be bound. this is the case in rendernormal and renderform.

  3. when you are using this inside the render function of manage, you were using an anonymous callback. but then this would bind to this callback rather than the class function. changing this to a arrow function works.

class basics extends react.component {
  constructor() {
    super();
    this.state = { editing: false };
    this.rendernormal = this.rendernormal.bind(this);
    this.renderform = this.renderform.bind(this);
  }
  edit() {
    this.setstate({ editing: true });
  }
  save() {
    this.setstate({ editing: false });
    this.props.upcomment(this.refs.newtext.value, this.props.index);
  }
  remove() {
    this.props.delcomment(this.props.index);
  }
  rendernormal() {
    return (
      <div>
        <div classname="commenttext">{this.props.children}</div>
        <button onclick={this.edit.bind(this)} classname="button-primary">edit</button>
        <button onclick={this.remove.bind(this)} classname="button-danger">remove</button>
      </div>
    )
  }
  renderform() {
    return (
      <div>
        <textarea ref='newtext' defaultvalue={this.props.children}></textarea>
        <button onclick={this.save.bind(this)} classname="button-success">save</button>
      </div>
    )
  }
  render() {
    if (this.state.editing) {
      return this.renderform();
    } else {
      return this.rendernormal();
    }
  }
}

class manage extends react.component {
  constructor(props) {
    super(props);
    this.removecomment = this.removecomment.bind(this);
    this.updatecomment = this.updatecomment.bind(this);
    this.state = {
      comments: [
        'this is a first comment',
        'hi there!',
        'i am learning react'
      ]
    }
  }

  removecomment(i) {
    console.log(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 })
  }

  render() {
    return (
      <div classname="board">
        {this.state.comments.map((text, i)=> {
          return (
          <basics key={i} index={i} upcomment={this.updatecomment} delcomment={this.removecomment}>
            {text}
          </basics>)
        }
        )}
      </div>
    )
  }
};

reactdom.render(<manage />, document.getelementbyid("example"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<div id="example"></div>


Related Query

More Query from same tag