Dispatch action for onClick event

Question

In react component I have made a function as

 handleClick(event, key, value) {
    event.preventDefault()
    this.setState({
      query:"",
      key:key,
      value:value
    });
    this.props.onClick(this.state);
    console.log("key...." + key   );
    console.log("val...." + value);
  }

this should be called when I am clicking a link

onClick={(e) => this.handleClick(e, {key}, {el}) }

Also using connect I am dispatching action as follows

export const mapDispatchToProps = (dispatch) => ({

  onClick: (query, key, value) => dispatch(onSearch(query,key, value)


  )
});

But on search method key and value are coming as undefined.But in handleClick function I am getting

key....[object Object]
val....[object Object]

Are `key` and `el` defined? Is the `onSearch` function defined? — Aron, Mar 28 '17 at 09:05
No. But try `console.log({ key, val })`. That way you should be able to see the actual objects — Aron, Mar 28 '17 at 09:07
check this answer for explanation: http://stackoverflow.com/a/42593250/5185595 — Mayank Shukla, Mar 28 '17 at 09:11
If I am using onClick={(e) => this.handleClick(e, "js", "nmn") }, then also issue remains the same — js_248, Mar 28 '17 at 09:27

score 1 · Accepted Answer · answered Mar 28 '17 at 09:04

key and value will be undefined. You need to call props method on callback of setState because you will not get updated state value just after calling setState.

handleClick(event, key, value) {
        event.preventDefault()
        this.setState({
          query:"",
          key:key,
          value:value
        },()=>{

           this.props.onClick(this.state);
        console.log("key...." + key   );
        console.log("val...." + value);
    });

      }

score 0 · Answer 2 · answered Mar 28 '17 at 10:28

0

The way your calling the 'onClick' function is wrong, right now you are only passing one argument and not three.

It should be called like this

this.props.onClick(query, key, value);

answered Mar 28 '17 at 10:28

Sumit R

106
3

Dispatch action for onClick event

2 Answers2