How do I bind onChange event to a function from an imported class?

Question

First off, I'm VERY new to ReactJS, so sorry if this is something basic. I am trying to keep my textbox (SearchBox) in a separate file for maintainability. I have the search function defined in the "main" class.

When I try to bind the textbox to the imported function, I keep getting an error saying:

TypeError: Cannot read property 'bind' of undefined

What am I doing wrong?

Main.js

import React, { Component } from "react";
import PropTypes from "prop-types";

const Context = React.createContext();

class EmployeeClass extends Component {
  state = {
    employees: []
  };

  componentWillMount() {
    this.filterEmployees();
  }

  filterEmployees = name => {
    fetch(`http://apicall.com?name=${name}`)
    .then(res => res.json())
    .then(res => {
      console.log(res) 
      this.setState({
       employees: res.results
      })
    })
  };

  performSearch(e) {
    this.filterEmployees(e.target.value)
  }

  render() {
    const { children } = this.props;
    return (
      <Main.Employees
        value={{
          ...this.state,
          filterEmployees: this.filterEmployees
        }}
      >
        {children}
      </Main.Employees>
    );
  }
}

export default { Employees: EmployeeClass };

SearchBox.js

import React from "react";
import Main from "../main";

const SearchBox = () => (
  <div>
    <input onChange={() => Employees.filterEmployees} type="text" className="input" placeholder="Search..." />
  </div>
);

export default SearchBox;

Thanks!

Answer 1

You have two errors in the code.

In SearchBox.js, Employees is undefined. You should use Main.Employees instead.

Second, filterEmployees is an instance method, not a class method, so you can not call Employees.filterEmployees . You should declare this method to be static.