How to Pass in Functions in ReactJs?

Question

I am using the redux pattern but I am not sure just pass in 1+ of my actions methods to a dumb component.

right now in my smart component I have something like

<AddStorageItemButton {...this.props} />

but this of courses passes everything in and I don't want that.

I want something like

<AddStorageItemButton test={()=>this.showAddStorageItemModal(this)} />

then in my the component I tried to do

 <a href="#"onClick={() => this.props.test(true) }> Add</a>

Here is my function.

export function showAddStorageItemModal(show) {
    return function (dispatch) {
        dispatch({ type: actions.SHOW_ADD_STORAGE_ITEM_MODAL, payload: show });
    };
}

Edit here is more of my structure

import React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';

import 'materialize-css/sass/materialize.scss';
import '../styles/main.scss';


import AddStorageItemButton from './AddStorageItemButton.js';

import { showAddStorageItemModal } from '../actions/StorageItemActions.js';

class App extends React.Component {
  render() {
    return (
      <div>
          <AddStorageItemButton {...this.props} test={this.props.showAddStorageItemModal(this)} />
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    // reducers
  };
}

function matchDispatchToProps(dispatch) {
  return bindActionCreators({
    showAddStorageItemModal: showAddStorageItemModal,
  }, dispatch);
}


export default connect(mapStateToProps, matchDispatchToProps)(App);

Rob M. · Accepted Answer · 2016-08-16 16:54:11Z

1

Since showAddStorageItemModal is returning a closure, I think what you want to do is pass the return value of that function as the prop:

<AddStorageItemButton test={this.showAddStorageItemModal(this)} />

That way when you click, the dispatch will be invoked

answered Aug 16, 2016 at 16:54

Rob M.

36.6k6 gold badges56 silver badges51 bronze badges

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

Comments

Praveen Prasad · Accepted Answer · 2016-08-16 17:00:06Z

0

//I am hoping you have bind showAddStorageItemModal to this in constructor

<AddStorageItemButton test={this.showAddStorageItemModal} />




 <a href="#"onClick={() => this.props.test(true)() }> Add</a>

answered Aug 16, 2016 at 17:00

Praveen Prasad

32.2k20 gold badges77 silver badges106 bronze badges

Collectives™ on Stack Overflow

How to Pass in Functions in ReactJs?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related