CODEWITHSUNDEEP
reactjsflowtype
green1919
green1919

Reputation: 289

Property not found in class - Flow & React

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

Upvotes: 3

Views: 2713

Answers (2)

Amine
Amine

Reputation: 349

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;

Upvotes: 2

TLadd
TLadd

Reputation: 6884

Flow treats methods on classes as read-only. Thus, the line

this.handleSearchSubmit = this.handleSearchSubmit.bind(this);

triggers a flow error. Here is a relevant github issue: https://github.com/facebook/flow/issues/1517

There's a couple of workarounds to deal with this. I generally handle it this way:

constructor(props: Props) {
  super(props);

  const self: Object = this
  self.handleSearchSubmit = this.handleSearchSubmit.bind(this)
}

Upvotes: 0

Related Questions