react - this = undefined, how to pass the prop into my function

Question

I have passed my user ID into my 'OrderMessages' component but in my function says undefined. When my user submits a messages using the form in the handleFormSubmit function I need the UserID and the datetime of the message. I have managed to get the date and time but when trying to console log to get the UserID I keep getting an error. I have tried this.props.... and this.state but both say undefined, can you please help. In my constructor I have tested using const UserId = props.location.state.UserID; and in debug I can see this has correctly got the UserID so im not sure how to get it into my hadleFormSubmit function.

import React from "react";
import Moment from "moment";
import { Form, Button } from "react-bootstrap";

class OrderMessages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      isLoading: false,
      checkboxes: [],
      selectedId: [],
      formLableSelected: "",
      formSelectedSubject: "",
      formSelectedSubjectId: "",
      formNewSubject: "",
      formChainID: "",
      formMessageBody: "",
      userId: '',
    };
    const UserId = props.location.state.UserID;
  }
  

  componentDidMount() {
    this.setState({ isLoading: true });
    const proxyurl = "https://cors-anywhere.herokuapp.com/";
    const url =
      "myURL" +
      this.props.location.state.orderNumber;
    fetch(proxyurl + url)
      .then((res) => res.json())
      .then((data) => this.setState({ data: data, isLoading: false }));
  }

  handleClick = (id) => {
    if (this.state.selectedId !== id) {
      this.setState({ selectedId: id });
    } else {
      this.setState({ selectedId: null });
    }
  };

  setformSubjectID(messageSubject) {
    if (messageSubject.subject === this.state.formSelectedSubject) {
      this.setState({ formSelectedSubjectId: messageSubject.messageSubjectId });
    }
  }

  handleChangeSubject = (event) => {
    this.setState({ formSelectedSubject: event.target.value });
    this.state.data.message_Subjects.map((ms) => this.setformSubjectID(ms));
  };

  handleFormSubmit(e) {
    e.preventDefault();

    // get current time
    let submit_time = Moment().format("ddd DD MMM YYYY HH:mm:ss");
    console.log("messageDatetime", submit_time);

    // get user id  THIS IS WHAT DOESN’T WORK
    console.log("messageSentFrom", this.state.userId);
console.log("messageSentFrom", this.props.location.state.UserID);

  }

  render() {
    const { data, isLoading } = this.state;

    if (isLoading) {
      return <p>Loading ...</p>;
    }

    if (data.length === 0) {
      return <p> no data found</p>;
    }

    console.log("mess: ", data);

    return (
      <div>
        
        <div className="sendMessageContent">
         <Form className="sendMessageForm" onSubmit={this.handleFormSubmit}>
            <Form.Group className="formRadio">
              <Form.Check
                className="formRadiob"
                type="radio"
                label="New chat"
                value="new"
                name="neworexisitng"
                id="New Message"
                onChange={this.onFormMessageChanged}
                defaultChecked
              />
              <Form.Check
                className="formRadiob"
                type="radio"
                label="Reply to exisiting chat"
                value="reply"
                name="neworexisitng"
                id="exisiting Message"
                onChange={this.onFormMessageChanged}
              />
            </Form.Group>
            {this.returnCorrectFormFields(data)}
            <Form.Group>
              <Form.Label>Message Body</Form.Label>
              <Form.Control as="textarea" rows={3} />
            </Form.Group>
            <Button variant="primary" type="submit">
              Send Message
            </Button>
          </Form>
        </div>
      </div>
    );
  }

 returnCorrectFormFields(data) {
    if (this.state.formLableSelected === "new") {
      return this.newMessageSubject(data);
    } else {
      return this.choseMessageSubject(data);
    }
  }

  choseMessageSubject(data) {
    return (
      <Form.Group>
        <Form.Label>Select the message subject</Form.Label>
        <Form.Control as="select" onChange={this.handleChangeSubject}>
          <option value="0">Choose...</option>
          {data.message_Subjects.map((ms) => (
            <option value={ms.subject}>{ms.subject}</option>
          ))}
        </Form.Control>
      </Form.Group>
    );
  }

  newMessageSubject(data) {
    return (
      <Form.Group>
        <Form.Label>Enter Message Subject</Form.Label>
        <Form.Control type="text" placeholder="Enter message subject" />
      </Form.Group>
    );
  }

  onFormMessageChanged = (event) => {
    this.setState({
      formLableSelected: event.target.value,
    });
  };

  getAllMessageInChain(messageChain) {
    return (
      <div className="messageHistory">
        <div className="messageHistoryHeader">
          <div className="innerMS-history-body">Message</div>
          <div className="innerMS">Date and Time</div>
          <div className="innerMS">Message sent by</div>
        </div>
        {messageChain.map((ms) => (
          <div className="messageHistoryBody">
            <div className="innerMS-history-body">{ms.messageBody}</div>
            <div className="innerMS">
              {Moment(ms.dateTime).format("ddd DD MMM YYYY hh:mm:ss")}
            </div>
            <div className="innerMS">{ms.sentFromId}</div>
          </div>
        ))}
      </div>
    );
  }

  getLatestMessageDateTime(messageChain) {
    const lastmessage = messageChain.length - 1;

    Moment.locale("en");
    var dt = messageChain[lastmessage].dateTime;
    return Moment(dt).format("ddd DD MMM YYYY hh:mm:ss");
  }
}

export default OrderMessages;

Answer 1

The scope of this isn't the component in the function you're using.

Either change handleFormSubmit to this to bind this automatically.

handleFormSubmit = (e) => {
  // .. your code
}

or bind this manually in the constructor

constructor() {
  // ..other code
  this.handleFormSubmit = this.handleFormSubmit.bind(this)
}