Property not found in class - Flow & React

Question

I am trying to leverage Flow and get it working nicely with a react component of mine. However I am getting:

client/search-container.jsx:18 18: this.handleSearchSubmit = this.handleSearchSubmit.bind(this); ^^^^^^^^^^^^^^^^^^ property handleSearchSubmit. Property not found in 18: class SearchContainer extends React.Component { ^^^^^^^^^^^^^^^ SearchContainer

The component I have set up is as followed:

// @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'll see previously I was making use of the propTypes at the bottom of my class. Questions:

1. Does my class set up look correct?
2. Why is flow complaining that property handleSearchSubmit is not found and the same too with the name of my class name SearchContainer

Answer 1

Hello I feel like that @TLadd answer is a hack.

Flow is asking for the type of handleSearchSubmit and it 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;