React/Redux How to get map function values into a custom function

Question

I am doing a recent searches functionality by fetching an array from redux store and mapping through it get the values out of it.

            <ul className="sidebar__list">
              {searches.map((search, i) => {
                return (
                  <li className="sidebar__listItem" key={i}>
                    <Link
                      to="/venues"
                      onClick={this.onClickRecentSearches(search.query, search.location)}
                      className="sidebar__listItemLink"
                    >
                      {search.query} in {search.location}
                    </Link>
                  </li>
                );
              })}
            </ul>

What I want to do is dispatch a action on click. I have a fetchVenues action in reduce which require two inputs. How can i target the values of array and parse it into my action

onClickRecentSearches = (place, location) => {
  this.props.fetchVenues(place, location);
};

e.target only works for input.

Anthony · Accepted Answer · 2018-04-24 02:18:58Z

2

You have to make it an anonymous function:

onClick={() => this.onClickRecentSearches(search.query, search.location)}

answered Apr 24, 2018 at 2:18

Anthony

6,5122 gold badges20 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

MontyGoldy Over a year ago

I am receiving this error... "Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount."

Anthony Over a year ago

This answer shouldn't cause anything during a render or constructor; it is just calling your onClickRecentSearches function when you click a Link

MontyGoldy Over a year ago

Is there any better approach to my problem.... I need to feed those search.query and search.location to fetchVenues action.Is there any better way?

Anthony Over a year ago

I think this might be another problem with your app

MontyGoldy Over a year ago

Well I am printing the search array but when i try to do onCLick Its giving me errors

|

Collectives™ on Stack Overflow

React/Redux How to get map function values into a custom function

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related