Value Of This Is Undefined

I have a this value inside an if statement, nested inside a my handleFormChange function. I've tried to use arrow functions with this function to bind the value of this but im gett

Solution 1:

The first step into learning how to do what you want is to study how React's State works (official docs are great at explaning it).

This example is not complete, but should guide you through the proccess.

classCommentFormextendsComponent{

constructor(props) {
  super(props);

  this.state = {
    author  : '',
    message : '',
  }

  this.onChangeAuthorName = this.onChangeAuthorName.bind(this);
  this.onBlurAuthorName   = this.onBlurAuthorName.bind(this);
}

onChangeAuthorName(e) {
  this.setState({ author: e.target.value });
}

onBlurAuthorName() {
  // trim on blur (or when you send to the network, to avoid// having the user not being able to add empty whitespaces// while typingthis.setState({ author: this.state.author.trim() })
}

render() {
  return (
    ...
    <input value={this.state.author} onChange={this.onChangeAuthorName} onBlur={this.onBlurAuthorName} />
    ...
  );
}

}

Usually, when you want to "set" variables in React, you don't add them as you do to in Javascript classes (this.comment = e.target.value), but instead, use the function setState(). From the docs:

// Wrongthis.state.comment = 'Hello';

Instead, use setState():

// Correctthis.setState({comment: 'Hello'});

(NOTE: Alternatively, this could be done using React Hooks, but I recommend you learn the lifecycle methods firsthand. Good luck!)

Solution 2:

I decided to write even if you proposed the correct answer for the simple reason that I think my code is closer to what it published.

importReact, { Component } from"react";
importReactDOM from"react-dom";

classAppextendsComponent {
  constructor(props) {
    super(props);
    this.state = {
      comment: {},
      some: 1
    };
  }

  handleFormChange = e => {
    e.preventDefault();
    let { comment } = this.state;
    const newCommentState = function() {
      let returnObj = { ...comment };
      returnObj[this.target.name] = this.target.value.trim();
      return returnObj;
    }.bind(e)();
    this.setState({ comment: newCommentState });
  };

  handleSubmit = e => {
    e.preventDefault();
    let { comment } = this.state;
    if (!comment.author || !comment.message) return;

    this.props.onCommentSubmit(comment);
    this.setState({ comment: {} });
    e.target[0].value = "";
    e.target[1].value = "";
  };

  render() {
    return (
      <div><formclassName="ui form"method="post"onChange={e => {
            this.handleFormChange(e);
          }}
          onSubmit={e => {
            this.handleSubmit(e);
          }}
        >
          <divclassName="form-group"><inputclassName="form-control"placeholder="user..."name="author"type="text"
            /></div><divclassName="form-group"><textareaclassName="form-control"placeholder="comment..."name="message"
            /></div><divclassName="form-group"><buttondisabled={null}className="btn btn-primary">
              Comment &#10148;</button></div></form></div>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Live example: