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 trial

JavaScript React Components (2018) Managing State and Data Flow Update State Based on a Player's Index

Posted by Marius Adam
Marius Adam
1,736 Points

onClick 1 and -1 to 0.5 and -0.5 otherwise increment by 2???

In the Counter I had to change the 1 and -1 to 0.5 and -0.5 because otherwise on click the score would increment by 2. Any ideas why this happened?

Oliver Duran
.a{fill-rule:evenodd;}techdegree seal-36
Oliver Duran
Full Stack JavaScript Techdegree Graduate 22,828 Points

Same issue here.

4 Answers

Oliver Duran
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Oliver Duran
Full Stack JavaScript Techdegree Graduate 22,828 Points
Oliver Duran
.a{fill-rule:evenodd;}techdegree seal-36
Oliver Duran
Full Stack JavaScript Techdegree Graduate 22,828 Points

Hey Marius! i fixed that problem by removin this from the index.js file, i do not know why but it worked!

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

ReactDOM.render(
    <App />,
  document.getElementById('root')
);
John Lamontagne
John Lamontagne
3,201 Points
John Lamontagne
John Lamontagne
3,201 Points

Thanks for this, it seems like some weird code that Treehouse has put in.

Jan Xavier Virgen
.a{fill-rule:evenodd;}techdegree seal-36
Jan Xavier Virgen
Full Stack JavaScript Techdegree Graduate 19,751 Points

Thank you!

Vivian Rydh
Vivian Rydh
8,873 Points

Thank you. ^_^

Brian Beal
Brian Beal
5,544 Points
Brian Beal
Brian Beal
5,544 Points

It's an intentional feature of the StrictMode. This only happens in development, and helps find accidental side effects put into the render phase. We only do this for components with Hooks because those are more likely to accidentally have side effects in the wrong place.

https://github.com/facebook/react/issues/15074

Emil Lau
Emil Lau
6,233 Points
Emil Lau
Emil Lau
6,233 Points

Thanks for the answer, but I still don't get why disabling strict mode could solve this.