0

I have a search component that captures the value onClick of a button. I use Redux for state management and when I pass in data, I get an error.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Typeahead } from 'react-bootstrap-typeahead';
import { searchInput } from '../../actions/index';

class Search extends Component {
  constructor(props) {
    super(props);
    this.setRef = null;
  }

  onSearch = () => {
        const value = this.setRef.instanceRef.state.text;
        console.log(value);
        this.props.searchInput(value);
  };

  render() {

    return (
      <form className="filter-form form-inline" role="search">
        <div className="form-group searchBar">
          <label className="filter-label">Search:</label>
          <Typeahead
            bsSize={ 'sm' }
            options={ this.props.options }
            placeholder={ this.props.placeholder }
            emptyLabel={ this.props.emptyLabel }
            ref={ a => this.setRef = a }
          />
          <span
            role={ 'search' }
            className="glyphicon glyphicon-search filter-label"
            id="searchButton"
            onClick={ this.onSearch }
          />
        </div>
      </form>
    );
  }
}

Search.propTypes = {
  options: PropTypes.array,
  placeholder: PropTypes.string,
  emptyLabel: PropTypes.node,
};
Search.defaultProps = {
  options: ['red', 'green', 'blue', 'orange', 'yellow'],
  placeholder: 'Enter a placeholder',
  emptyLabel: null,
};

export default connect(null, searchInput)(Search);

I get the value through the refs and pass that value through reducers so I can get that value to my parent calling this component as pass it as a param to the database to get a server side filtering.

This is my action.

export const searchInput = event => ({
  type: ACTION_TYPES.SEARCH_INPUT,
  data: event,
});

This is my reducer.

import * as ACTION_TYPES from '../consts/action_types';

const initialState = {
  searchTerm: '',
};

export const searchReducer = (state = initialState, action) => {
  switch (action.type) {
    case ACTION_TYPES.SEARCH_INPUT:
      return {
        ...state,
        searchTerm: action.data,
      };
    default:
      return state;
  }
};

This is the error I get.

Uncaught TypeError: n.props.searchInput is not a function
    at n.onSearch (Search.js:16)
    at Object.R (react-dom.production.min.js:26)
    at Object.invokeGuardedCallback (react-dom.production.min.js:25)
    at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.production.min.js:25)
    at $ (react-dom.production.min.js:30)
    at ee (react-dom.production.min.js:32)
    at ne (react-dom.production.min.js:32)
    at Array.forEach (<anonymous>)
    at Z (react-dom.production.min.js:31)
    at se (react-dom.production.min.js:34)

Could someone point out my mistake?

2 Answers 2

1

I believe the connect call needs to pass dispatch functions within an object to the mapDispatchToProps:

export default connect(null, { searchInput })(Search);
Sign up to request clarification or add additional context in comments.

1 Comment

My bad. That fixed it. Thanks.
1

export default connect(null, {searchInput})(Search);

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.