Property not found in class - Flow & React
I am trying to use Flow and work well with react component. However, I get:
client / search-container.jsx: 18 18: this.handleSearchSubmit = this.handleSearchSubmit.bind (this); ^^^^^^^^^^^^ property
handleSearchSubmit
. Property not found in 18: SearchContainer class extends React.Component {^^^^^^^^^^^^^^^^^ SearchContainer
The component I installed is the following:
// @flow
import React, { PropTypes } from 'react';
import SearchForm from './search-form';
type Props = {
onSearchUpdate: Function,
}
class SearchContainer extends React.Component {
props: Props;
constructor(props: Props) {
super(props);
this.handleSearchSubmit = this.handleSearchSubmit.bind(this);
}
handleSearchSubmit(searchTerm: {address: string, lat: number, lng: number}): void {
this.props.onSearchUpdate(searchTerm);
}
render() {
return (
<div className="searchBox">
<SearchForm onSearchSubmit={this.handleSearchSubmit} />
</div>
);
}
}
// SearchContainer.propTypes = {
// onSearchUpdate: PropTypes.func,
// };
export default SearchContainer;
You will see how I used propTypes at the bottom of my class earlier. Questions:
- Is my class installed correctly?
- Why is the thread complaining that the property was
handleSearchSubmit
not found and the same with the name of my class nameSearchContainer
source to share
Flow handles methods in read-only classes. So the line
this.handleSearchSubmit = this.handleSearchSubmit.bind(this);
raises a thread error. Here is the related github issue: https://github.com/facebook/flow/issues/1517
There are several workarounds to deal with this. I usually handle it like this:
constructor(props: Props) {
super(props);
const self: Object = this
self.handleSearchSubmit = this.handleSearchSubmit.bind(this)
}
source to share
Hi I feel like @ TLadd's answer is a hack.
The thread requests the type handleSearchSubmit and does not find it you just need to add this below below the method definition
handleSearchSubmit: <your type>;
This is the final code
// @flow
import React, { PropTypes } from 'react';
import SearchForm from './search-form';
type Props = {
onSearchUpdate: Function,
}
class SearchContainer extends React.Component {
props: Props;
// ->>>
handleSearchSubmit: <your type>;
// <---
constructor(props: Props) {
super(props);
this.handleSearchSubmit = this.handleSearchSubmit.bind(this);
}
handleSearchSubmit(searchTerm: {address: string, lat: number, lng: number}): void {
this.props.onSearchUpdate(searchTerm);
}
render() {
return (
<div className="searchBox">
<SearchForm onSearchSubmit={this.handleSearchSubmit} />
</div>
);
}
}
// SearchContainer.propTypes = {
// onSearchUpdate: PropTypes.func,
// };
export default SearchContainer;
source to share