chobo2 chobo2 - 1 year ago 66
React JSX Question

How to Pass in Functions in ReactJs?

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 (
<AddStorageItemButton {...this.props} test={this.props.showAddStorageItemModal(this)} />

function mapStateToProps(state) {
return {
// reducers

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

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

Answer Source

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

<AddStorageItemButton test={this.showAddStorageItemModal} />

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