I see there are lots of similar question in Javascript/React but I'm having this issue with CLojureScript/Reagent and I'm at a loss about how to solve it without messing up all my app-state names.
So I'm getting these warnings in the browser console:
react_devtools_backend.js:2430 Warning: React does not recognize the `showWarning` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `showwarning` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
These appear to be coming from the name of an item in the app-state:
(defonce app-state (reagent/atom {:show-warning "none"}))
The only solution I've found is to rename the item from :show-warning to :showwarning but this leads to a bunch of hard to read items.
I don't have any real control about how Reagent renames keys like :show-warning to "showWarning" but it seems this, being basic to how React works, would have a cleaner way to handle this.
Thanks!
React really shouldn't be able to see your state or care what's in it. My guess would be that you are rendering your state somewhere in the props positions. Most likely somewhere in your code you have [:div @app-state]. Possibly you were trying to render the state and should've done [:div {} @app-state].
This is perhaps a bit of a gotcha with Reagent, since [:p @im-a-string] would render the string but [:p @im-a-map] will treat the map as props.