Don't store DOM elements in state

[oliverjam]

week10-AJ/src/components/play.js

Line 64 in 4888b86

setData(JSX);

I explained this to @amberrignell last night, but I thought I'd document it here again.

React state is designed to store the data your app needs to keep track of in order to render correctly. This means stuff like the JSON you fetched from an API, whether a button has been clicked on etc.

By creating a bunch of JSX and storing it in state you're effectively preventing those elements from re-rendering correctly when other state changes. The reason we usually return JSX directly from the component function is so this return value changes when the component re-renders (when state values change). That way the DOM is always up-to-date.

Your JSX elements can never change, which is why you are having to do a bunch of DOM manipulation inside an event handler, rather than declaratively rendering the UI in your component's return. (See #11 for more info on what I mean by declaratively rendering)