this.props not a function

Question

I understand the three fixes (binding, arrow function method, arrow function for call back) for this error but am still getting error after using arrow function on the method. Error: _this.props.onSubmit is not a function" Please see below. Thanks.

import React from 'react';
import ReactDOM from 'react-dom'

var clickstyle = {
  color: "black",
  fontSize: 28,
  margin: 15,
}

class Click extends React.Component {
  state = { term: 'Say Something!' };

  onFormSubmit = (event) => {
    event.preventDefault();
    this.props.onSubmit(this.state.term);
  }
  render() {
    return (
      <div className="ui segment">
        <form onSubmit={this.onFormSubmit} className="ui form">
          <div className="field">
            <label style={clickstyle}> Say It!</label>
            <input
              type="text"
              value={this.state.term}
              onChange={(e) =>
                this.setState({ term: e.target.value.toUpperCase() })}
            />
          </div>
        </form>
      </div>
    )
  }
}

export default Click;

Answer 1

Here you go with a solution

You need to define PropType as func in Click component

import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';

var clickstyle = {
  color: "black",
  fontSize: 28,
  margin: 15,
}

class Click extends React.Component {
  state = { term: 'Say Something!' };

  onFormSubmit = (event) => {
    event.preventDefault();
    this.props.onSubmit(this.state.term);
  }
  render() {
    return (
      <div className="ui segment">
        <form onSubmit={this.onFormSubmit} className="ui form">
          <div className="field">
            <label style={clickstyle}> Say It!</label>
            <input
              type="text"
              value={this.state.term}
              onChange={(e) =>
                this.setState({ term: e.target.value.toUpperCase() })}
            />
          </div>
        </form>
      </div>
    )
  }
}

Click.propTypes = {
  onSubmit: PropTypes.func
};

export default Click;

Click.jsx You need to attach a method to prop for handling method.

handleSubmit = data => {
  window.console.log(data);
}

<Click onSubmit={this.handleSubmit} />