Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialEdwin Carbajal
4,133 PointsbindActionCreators error
Followed Guil and the code from the video but i get an error I don't understand. Here is my Scoreboard.js code:
import React, { Component, PropTypes } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as PlayerActionCreators from '../actions/player';
import Player from '../components/Player';
import Header from '../components/Header';
import AddPlayerForm from '../components/AddPlayerForm';
class Scoreboard extends Component {
static propTypes = {
players: PropTypes.array.isRequired
};
render() {
const { dispatch, players } = this.props;
const addPlayer = bindActionCreators(PlayerActionCreators.addPlayer, dispatch);
const removePlayer = bindActionCreators(PlayerActionCreators.removePlayer, dispatch);
const updatePlayerScore = bindActionCreators(PlayerActionCreators.updatePlayerScore, dispatch);
const playerComponents = players.map((player, index) => {
<Player
index={index}
name={player.name}
score={playerscore}
key={player.name}
updatePlayerScore={updatePlayerScore}
removePlayer={removePlayer}
/>
});
return (
<div className="scoreboard">
<Header players={players} />
<div className="players">
{ playerComponents }
</div>
<AddPlayerForm addPlayer={addPlayer} />
</div>
);
}
}
const mapStateToProps = state => (
{
players: state
}
);
export default connect(mapStateToProps)(Scoreboard);
And here is the error from the console
Uncaught Error: bindActionCreators expected an object or a function, instead received undefined. Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?
2 Answers
Jennifer Beck
Courses Plus Student 5,969 PointsHey Edwin,
I had the same error in my console even though I had imported the Action Creators properly.
It looks like line 25 of your code should read
score={player.score}
instead of
score={playerscore}
And then line 21 should be
const playerComponents = players.map((player, index) => (
<Player...
));
instead of
const playerComponents = players.map((player, index) => {
<Player...
});
Hopefully that helps!
Justin Rich
19,556 PointsI'm having trouble with this one too ... any suggestions?
David Park
5,095 Pointschrome dev tools it says: expected an object or a function, instead received undefined check the definition of your const addPlayer = bind action creator ...
make sure everything is spelled 100% correctly, it expected a object or function but got undefined??!!
UNDEFINED something is not being imported or referenced/spelled correctly :)
Hope that helps hehe
double check the spelling and reference to all the imports between the actions folder file and the scoreboard imports :D
If you have any issues still feel free to message me the Scoreboard js and actions folder
I don't mind helping you debug :DD