ESlint complains about this.props.handleSubmit missing in prop validation

Kim Stacks

I have a component called SiteTechnologyForm

class SiteTechnologyForm extends React.Component {

  static propTypes = {
    name: PropTypes.string,
    site_technology_id_number: PropTypes.string,
    common_site: PropTypes.string,
    title: PropTypes.string,
    errors: PropTypes.string
  }

  constructor(props) {
    super(props);

    this.state = {
      logged_in: localStorage.getItem('token') ? true : false,
      name: props.name || '',
      site_technology_id_number: props.site_technology_id_number || '',
      common_site: props.common_site || '',
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  UNSAFE_componentWillMount() {
    if (!this.state.logged_in) {
      browserHistory.push("/accounts/login");
    }
  }

  handleChange(event) {
    if (event.target && event.target.name){
      this.setState({[event.target.name]: event.target.value});
    }
  }

  handleSubmit() {
    let payload = {
      "common_site": this.state.common_site,
      "name": this.state.name,
      "site_technology_id_number": this.state.site_technology_id_number
    };
    this.props.handleSubmit(payload)
  }

  render() {
    const {
      title,
      errors
    } = this.props;

    return !this.state.logged_in ? '' :
      <BaseForm title={title} handleSubmit={this.handleSubmit} errors={errors} data={this.state}>
        <CommonSiteAutocomplete
          label="CommonSite *"
          id="id_common_site"
          required={true}
          inputProps={{
            name: "common_site",
            onChange: this.handleChange,
            value: this.state.common_site,
            required: true
          }}
        />
        <CustomInput
          labelText="Name *"
          id="id_name"
          formControlProps={{
            fullWidth: true
          }}
          inputProps={{
            type: "text",
            onChange: this.handleChange,
            name: "name",
            value: this.state.name,
            required: true
          }}
        />
        <CustomInput
          labelText="Site Technology ID *"
          id="id_site_technology_id_number"
          formControlProps={{
            fullWidth: true
          }}
          inputProps={{
            type: "text",
            onChange: this.handleChange,
            name: "site_technology_id_number",
            value: this.state.site_technology_id_number,
            required: true
          }}
        />
      </BaseForm>
  }
}

And ESlint is complaining about handleSubmit missing in props validation.

And SiteTechnologyForm is used in other components like AddSiteTechnology below:

class AddSiteTechnology extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      errors: ''
    };

    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(data) {

    fetch(siteTechUrl, {
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Token ${localStorage.getItem('token')}`
      },
      method: 'POST',
      body: JSON.stringify(data),
    })
      .then(response => {
        if (response.status >= 400) {
          return this.setState({errors: response.statusText});
        }
        browserHistory.push("/site_technologies/list");
      })
  }

  render() {
    return <SiteTechnologyForm title="Add Site Technology" handleSubmit={this.handleSubmit} errors={this.state.errors}/>
  }
}

I initially tried to use

handleSubmit: PropTypes.function

But when I try to run the webpage, I get this error in the console

checkPropTypes.js:19 Warning: Failed prop type: SiteTechnologyForm: prop type handleSubmit is invalid; it must be a function, usually from the prop-types package, but received undefined.

How do I resolve this situation with the handleSubmit not passing the validation?

Bhojendra Rauniyar

As per the ESLINT, you will also need to provide the prop types for the handleSubmit props. The function type is handled by func not function:

handleSubmit: PropTypes.func

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

ESLint `prop is missing in props validation` but it's there

Eslint - 'match' is missing in props validation (react/prop-types)

ESLint: '.map is missing in props validation' (eslint react/prop-types) in Typescript React

ESLint React PropTypes, 'prop' is missing in prop validation

Why, even after specifying a type parameter for a React component, the linter still complains about '<property>' missing in props validation?

React eslint error missing in props validation

ESLint missing props validation in Class Component

How to solve ESLint is missing in props validation in React?

missing in props validation react/prop-types

eslint+ flow : 'attribute' is missing in props validation (Object with identifier)

Dispatch action is missing in props validation [react/prop-types]

Line 5: 'tags' is missing in props validation react/prop-types

'children' is missing in props validation react/prop-types

Linker complains about missing -fPIC

ESLint complains about arrow function return object

Props is missing from props validation

Parameter is missing in props validation

'setLoading' is missing in props validation

ESLint error: "Missing props in validation" in React ( Replacing it by PropTypes.checkPropTypes does not fix it )?

Line 4:27: 'component' is missing in props validation react/prop-types

Jacoco complains about unlikely missing branch coverage

Aida Web install complains about missing "SecureHashAlgorithm"

SSH Handshake complains about missing host key

split now complains about missing "isSeparator"

Nextcloud client complains about missing keychain at startup

React useEffect Hook complains about missing dependency

Visual Studio complains about typescript errors that tsc and eslint don't

eslint complains about __dirname not being defined in a NodeJS file

'classes' is missing in props validation - Linting