CODEWITHSUNDEEP
reactjsreduxreact-redux
arunmmanoharan
arunmmanoharan

Reputation: 2675

Function not passing in argument - React Redux

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?

Upvotes: 0

Views: 145

Answers (2)

joshweir
joshweir

Reputation: 5617

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

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

Upvotes: 1

Yossi
Yossi

Reputation: 6027

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

Upvotes: 1

Related Questions