CODEWITHSUNDEEP
reactjsreact-redux
Dave
Dave

Reputation: 10924

Why do I get Invalid Hook Call

I'm trying to build a react web application using functional components, react hooks, and redux. I can't figure out why I am getting the invalid hook call. When I click the Search button I get the react error.

Here's the entirety of the code:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux'

export const SearchBar = () => {
    const searchParameters = useSelector(state => state.searchParameters ?? {});
    const dispatch = useDispatch;

    return (
        <div className="searchbar">
            <div className="search-parameters">
                <BasicSearch searchParameters={searchParameters} />
                <div className="col form-group">
                    <button type="button" className="btn btn-primary" onClick={() => dispatch(doSearch())} >
                        SEARCH
                    </button>
                </div>
            </div>
        </div>
    );
}

const BasicSearch = (props) => {
    return (
        <>
            <input type="text" id="origin" />
        </>
    );
}

const Actions = {
    DO_SEARCH: "DO_SEARCH"
}

const doSearch = () => {
    return { type: Actions.DO_SEARCH };
}

Upvotes: 2

Views: 73

Answers (2)

Mr. Robot
Mr. Robot

Reputation: 1834

useDispatch on your 6th line of code is a function, so you need to assign the variable dispatch to it like so:

const dispatch = useDispatch();

Upvotes: 3

Rupesh Chaudhari
Rupesh Chaudhari

Reputation: 308

Update

const dispatch = useDispatch();

and

onClick={() => dispatch(doSearch)}

Upvotes: 3

Related Questions