Passing a function to a child component in a reactor
I am trying to pass a function to a child component in React. If I put a function in an ES6 class I have access to this.props.dispatch
, but I do not have access withinmapStateToProps
Conversely, when I define a function outside of an ES6 class, I seem to have access to the function, but not this.props.dispatch
Can someone determine what I am doing wrong in order to have both access to this.props.dispatch
and having the function available in the functionmapStateToProps
import React, { Component } from 'react';
import { connect } from 'react-redux';
import DenomInput from '../denomInput/DenomInput.js';
import * as actions from '../../actions/countActions';
class CountableItems extends Component {
constructor(props) {
super(props);
this.onDenomChange = this.onDenomChange.bind(this);
}
onDenomChange = (value, denom) => {
this.props.dispatch(actions.increaseSum(value, denom));
console.log(value);
}
render() {
const props = this.props;
let denomGroups = props.denoms.map(function (denom, i) {
return (
Object.keys(denom).map(function (key) {
let denoms = denom[key].map(function (item, i) {
return <DenomInput denom={item} onDenomChange={props.onDenomChange} key={i}></DenomInput>
});
return (<div className="col"><h2>{key}</h2>{denoms}</div>)
})
);
});
return (
<div className="countable-item-wrapper">
<div className="row">
{denomGroups}
</div>
</div>
);
}
}
function mapStateToProps(state, ownProps) {
return {
denoms: state.count.denomGroups,
onDenomChange: this.onDenomChange
}
}
export default connect(mapStateToProps)(CountableItems);
Here is the component that displays <CountableItems>
import React, { Component } from 'react';
import CountableItems from '../components/countableItems/CountableItems.js';
import CountSummary from '../components/countSummary/CountSummary.js';
import "./Count.css";
class Count extends Component {
render() {
return (
<div className="container">
<div className="row">
<div className="col-8">
<CountableItems />
</div>
<div className="col-4">
<CountSummary />
</div>
</div>
</div>
);
}
}
default export Count;
source to share
You want to pass a reference to the CountableItems
instance property onDenomChange
. You can do this by specifying this.onDenomChange
how onDenomChange={this.onDenomChange}
.
Important note: you need to use arrow functions () => {}
to this
reference the instance CountableItems
inside your nested loops. Regular functions like function () {}
will not use the correct context.
import React, { Component } from 'react';
import { connect } from 'react-redux';
import DenomInput from '../denomInput/DenomInput.js';
import * as actions from '../../actions/countActions';
class CountableItems extends Component {
onDenomChange = (value, denom) => {
this.props.dispatch(actions.increaseSum(value, denom));
console.log(value);
}
render() {
let denomGroups = this.props.denoms.map((denom, i) => {
return (
Object.keys(denom).map((key) => {
let denoms = denom[key].map((item, i) => {
return <DenomInput denom={item} onDenomChange={this.onDenomChange} key={i}></DenomInput>
});
return (<div className="col"><h2>{key}</h2>{denoms}</div>)
})
);
});
return (
<div className="countable-item-wrapper">
<div className="row">
{denomGroups}
</div>
</div>
);
}
}
function mapStateToProps(state, ownProps) {
return {
denoms: state.count.denomGroups,
}
}
export default connect(mapStateToProps)(CountableItems);
source to share