# Common Bugs when Learning React

The following list tries to summarize some of the things that a developer may encounter while learning React. The list focuses on scenarios that result in actual bugs (things that don't work) or things that cause warnings in the console.

* using class prop instead of className (for/htmlFor, etc...)
* trying to set the style prop with a string
* not having a parent element or fragment
* not binding (at all or incorrectly)
* using the wrong lifecycle hook
* misspelling componentWillReceiveProps
* trying to use value from setState immediately after setting
* not using keys on items
* using keys, but using the index
* using a lowercase  component name
* Not wrapping objects with parentheses
* using props directly in initial state (not defaultValue)
* accidentally overriding props when spreading in JSX
* injecting HTML (not using dangerous)
* tryng to use an event object that isnt' persisted
* using pure component without immutable data
* passing the wrong type to a prop (e.g. component expects number, but pass string)

## Submissions from Twitter or Comments

* [Eric Adams](https://twitter.com/adams_ea/status/994709149157068801) - Honestly just forgetting to wrap spread props in braces, e.g. <MyComponent should="work" but="I'm" gonna="whoops" ...props />
* [James Nolan](https://twitter.com/CoffeeHeadJim/status/994713739571224576) - Calling setState on an unmounted component (typically when forgetting to abort an ajax request on componentWillUnmount)
* [Cory House](https://twitter.com/housecor/status/994714549839368192) - Unknowingly mutating state (misunderstanding copy by Val vs ref), binding (this confusion), improper casing (propTypes/Component), Redux all the things, lack of ES6+ knowledge is most common gap so I start there.
* [Benjamin Lannon](https://gist.github.com/elijahmanor/778c8effcd62db9a1a5a78899fdd68de#gistcomment-2585523) - One I got caught up on was executing a function within an onClick property (<button onClick={this.doStuff()}>Click Me!</button>) when you should write (<button onClick={this.doStuff}>Click Me!</button>)
* [Nick Kircos](https://twitter.com/BlackHoleDesign/status/994763880244039680) - 
Accidentally trying to access a prop from this.state and vice versa
* [Jeff Pierson](https://twitter.com/JeffreyHPierson/status/994720443780222976) - Attempting to set a variable to JSX expression and then attempting to use that variable name as a component element name. This only works for function names, not variables.
* [summasmiff](https://twitter.com/sumerfish/status/994905516399833088) - I definitely tried to mutate objects in state and had some hard times because of it
* [Nick Kircos](https://twitter.com/BlackHoleDesign/status/994756688409280513) - Not React specific. But forgetting to export your component
* [Toby Leftly](https://twitter.com/TobyLeftly/status/994721076146995200) - Maximum call stack exceeded when using setState in componentDidUpdate() maybe?
* [Jeff Pierson](https://twitter.com/JeffreyHPierson/status/994721051039936518) - Attempting to set own props in response to an event instead of setting and using component state. Of course when not using Redux.
* [Nick Kircos](https://twitter.com/BlackHoleDesign/status/994761689466892288) - Calling setState in render
* [Maggie Hedrick](https://twitter.com/maggiekhedrick/status/994721690381897729) - one I've seen is actually understanding what the curly braces are for - when I first started I just thought it was single some places and double others until it clicked and I felt like the worlds biggest idiot