ReactJS + Redux, getting error "Failed prop type: Right-hand side of 'instanceof' is not callable"

user_2242127 0
Viewed 1864

I'm helping develop a web app in React and we're using Redux for global state control.

What I don't understand is why are we getting these warnings on the browser console? What is needed to make it go away? It looks like something's wrong when declaring the prop types but I can't figure out how to do it properly.

Below is the warning plus the relevant code, simplified for brevity.

Browser console

Warning: Failed prop type: Right-hand side of 'instanceof' is not callable
    in SearchBar (created by ConnectFunction)
    in ConnectFunction (created by Body)
    in div (created by Header)
    in div (created by Header)
    in div (created by Header)
    in Header (created by Body)
    in div (created by Body)
    in div (created by Body)
    in Body (created by Context.Consumer)
    in Route (created by AuthenticatedRoute)
    in AuthenticatedRoute (created by App)
    in Switch (created by App)
    in Router (created by HashRouter)
    in HashRouter (created by App)
    in StrictMode (created by App)
    in App
    in Provider

SearchBar.jsx

import React from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as SearchBarActions from './redux/actions';

const SearchBar = props => {
  const handleSearch = () => {
    [some code here]
  };

  return (
    <div className="searchbar w-100 my-2">
      <div className="input-group">
        <input
          id="searchBar"
          name="searchBar"
          type="text"
          className="form-control rounded"
          aria-describedby="button-main-search"
        />
        <button
          type="button"
          className="btn btn-lg fas fa-search text-light pl-3"
          id="button-main-search"
          onClick={handleSearch}
        >
          <span className="sr-only">Search</span>
        </button>
      </div>
    </div>
  );
};

SearchBar.propTypes = {
  actions: PropTypes.instanceOf(SearchBarActions),
};

SearchBar.defaultProps = {};

export default connect(null, dispatch => ({
  actions: bindActionCreators(SearchBarActions, dispatch),
}))(SearchBar);

redux/actions

import * as CONSTANTS from './constants';

export const addSearchLogs = searchLogs => {
  return {
    type: CONSTANTS.ADD_SEARCH_LOGS,
    searchLogs,
  };
};

export const clearSearchLogs = () => {
  return {
    type: CONSTANTS.CLEAR_SEARCH_LOGS,
  };
};

constants

export const ADD_SEARCH_LOGS = 'ADD_SEARCH_LOGS';
export const CLEAR_SEARCH_LOGS = 'CLEAR_SEARCH_LOGS';
react-redux redux reactjs javascript
1 Answers

PropTypes.instanceOf defines a prop as being an instance of a particular class, usually a React component, but certainly a function.

Your SearchBarActions variable, despite its TitleCase name, is a JavaScript object, and it's not callable.

I think you want something more like this:

  actions: PropTypes.shape({
    addSearchLogs: PropTypes.func,
    clearSearchLogs: PropTypes.func
  }),

Reference: https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes

user_8776820
Related