Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

benjaminmosery
benjaminmosery
6,346 Points

N is Undefined - React Scoreboard Not Displaying (Repo with code)

I attempting to learn how to implement React Redux in my scoreboard application, per the videos hosted by treehouse. (Lesson I am following: https://teamtreehouse.com/library/building-applications-with-react-and-redux)

However, I am receiving the following errors:

Error #1: TypeError: n is undefined Scoreboard.js:23:6

Using the debugger, the following code is shown:

const playerComponents = players.map((player, index) => (
  <Player
    index = {index}
    name = {player.name}
    score = {player.score}
    key = {player.name}
    updatePlayerScore = {updatePlayerScore}
    removePlayer = {removePlayer}
/>
));

Error #2 TypeError: "n is undefined" react-dom.production.min.js:187:139

valuehttp://localhost:8080/bundle.js:6:52103Cihttp://localhost:8080/bundle.js:14:62169Nihttp://localhost:8080/bundle.js:14:67055uahttp://localhost:8080/bundle.js:14:76632cahttp://localhost:8080/bundle.js:14:76939Wahttp://localhost:8080/bundle.js:14:80513Vahttp://localhost:8080/bundle.js:14:79984zahttp://localhost:8080/bundle.js:14:79810Uahttp://localhost:8080/bundle.js:14:79183hahttp://localhost:8080/bundle.js:14:78430Zahttp://localhost:8080/bundle.js:14:85764tshttp://localhost:8080/bundle.js:14:85977renderhttp://localhost:8080/bundle.js:14:89672fshttp://localhost:8080/bundle.js:14:87876Jahttp://localhost:8080/bundle.js:14:85182fshttp://localhost:8080/bundle.js:14:87811renderhttp://localhost:8080/bundle.js:14:90459<anonymous>http://localhost:8080/bundle.js:22:5471Thttp://localhost:8080/bundle.js:1:7171rhttp://localhost:8080/bundle.js:1:565<anonymous>http://localhost:8080/bundle.js:22:106266Thttp://localhost:8080/bundle.js:1:7171<anonymous>http://localhost:8080/bundle.js:1:7611<anonymous>http://localhost:8080/bundle.js:1:2

Using the debugger, the following code is shown from Webpack:

A("166"):void 0,null;a=cg($f.current);if(Cg(b))c=b.stateNode,e=b.type,f=b.memoizedProps,c[C]=b,c[Ma]=f,d=Ue(c,e,f,a,d),b.updateQueue=d,null!==d&&Lg(b);else{a=Pe(e,c,d,a);a[C]=b;a[Ma]=c;a:for(f=b.child;null!==f;){if(5===f.tag||6===f.tag)a.appendChild(f.stateNode);else if(4!==f.tag&&null!==f.child){f.child.return=f;f=f.child;continue}if(f===b)break;for(;null===f.sibling;){if(null===f.return||f.return===b)break a;f=f.return}f.sibling.return=f.return;f=f.sibling}Re(a,e,c,d);Ze(e,c)&&Lg(b);b.stateNode=
a}null!==b.ref&&(b.effectTag|=128)}return null;case 6:if(a&&null!=b.stateNode)Rg(a,b,a.memoizedProps,c);else{if("string"!==typeof c)return null===b.stateNode?A("166"):void 0,null;d=cg(bg.current);cg($f.current);Cg(b)?(d=b.stateNode,c=b.memoizedProps,d[C]=b,Ve(d,c)&&Lg(b)):(d=Qe(c,d),d[C]=b,b.stateNode=d)}return null;case 14:return null;case 16:return null;case 10:return null;case 11:return null;case 15:return null;case 4:return eg(b),Pg(b),null;case 13:return Yf(b),null;case 12:return null;case 0:A("167");
default:A("156")}}function Tg(a,b){var c=b.source;null===b.stack&&null!==c&&vc(c);null!==c&&tc(c);b=b.value;null!==a&&2===a.tag&&tc(a);try{b&&b.suppressReactErrorLogging||console.error(b)}catch(d){d&&d.suppressReactErrorLogging||console.error(d)}}function Ug(a){var b=a.ref;if(null!==b)if("function"===typeof b)try{b(null)}catch(c){Vg(a,c)}else b.current=null}
function Wg(a){"function"===typeof Gf&&Gf(a);switch(a.tag){case 2:Ug(a);var b=a.stateNode;if("function"===typeof b.componentWillUnmount)try{b.props=a.memoizedProps,b.state=a.memoizedState,b.componentWillUnmount()}catch(c){Vg(a,c)}break;case 5:Ug(a);break;case 4:Xg(a)}}function Yg(a){return 5===a.tag||3===a.tag||4===a.tag}
function Zg(a)

Here is my repo from Github, complete with my program and its code. Any suggestions would be helpful.

https://github.com/Benmosery/React-Scoreboard-Updated

I've followed all of Guil's suggestions, but my Scoreboard still will not be displayed when npm is run.

Ben