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?
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.
Comments