Bootstrap reaction: warnings about unknown props

Question

I'm not sure why, but I notice a lot of warnings in my browser console regarding unknown details. Following are some warnings:

"Warning: Unknown prop `navbar` on <ul> tag. Remove this prop from the element. For details, see in ul (created by Nav) in Nav (created by NavbarWrapper) in div (created by NavbarWrapper)" "Warning: Unknown prop `divider` on <a> tag. Remove this prop from the element. For details, see in a (created by SafeAnchor) in SafeAnchor (created by MenuItem) in li (created by MenuItem) in MenuItem (created by NavbarWrapper) in ul (created by DropdownMenu) in DropdownMenu (created by Dropdown) in li (created by Dropdown) in Dropdown (created by Uncontrolled(Dropdown)) in Uncontrolled(Dropdown) (created by NavDropdown) in NavDropdown (created by NavbarWrapper) in ul (created by Nav) in Nav (created by NavbarWrapper)" 

NavbarWrapper is a responsive component that I wrote that displays the action-bootstrap navigation bar.

I just started to notice these warnings today (July 4, 2016). However, navbar works as expected.

I am using meteor 1.3.4.1, react 15.1.0 and reaction bootstrap 0.29.5

Can someone tell me if I am doing something wrong?

Answer 1

Not quite an answer (a new user, I can’t comment yet), but it seems that I recently reacted to version 0.15.2 , and part of the changes gave a warning about the transfer of unknown elements (or props) to dom.

This will not violate your user interface, but will include annoying warning logs to your browser console.

Additional relevant links: https://github.com/react-bootstrap/react-bootstrap/issues/1970

Answer 2

I dropped to v15.0.1 of React, and now everything is fine. The warnings really violated my application, so it was necessary to downgrade :(

Answer 3

in v15.2.0, React verifies that props are passed to DOM elements (ul, div, etc.). React expects valid details to be passed to the DOM elements. Details like 'style', 'className', 'htmlFor', etc. They are valid details. It is possible to pass any details to your own ReactComponents (for example, <ChatBox msg=''/> , <Book rack='1'/> ), but not to the main DOM elements. This may not be the solution in your case, but if you add "data-" to the name prop, for example, "data-propname", React does not complain.