I am currently doing a Collapseable Navbar using a simple boolean state change when the Toggle Button is clicked and depending on the boolean, the Collapse Menu is revealed or unrevealed.
I've been stuck with this issue and I've checked many a questions and blogs, tutorials etc... They all use the following statement.
<Collapse isnavopen={this.state.isnavopen} navbar>
However, this statement gives me an error as follows;
react_devtools_backend.js:4012 Warning: Received
falsefor a non-boolean attributeisnavopen. If you want to write it to the DOM, pass a string instead: isnavopen="false" or isnavopen={value.toString()}. If you used to conditionally omit it with isnavopen={condition && value}, pass isnavopen={condition ? value : undefined} instead.
In order to get around it, I used this statement which gives no error;
<Collapse isnavopen={this.state.isnavopen ? 1 : 0} navbar>
I have tested the variables and they are changing as needed with the button click/toggler. I also have setState for the boolean changes and they all work correctly. The only thing that does not work as intended is the Collapse element itself. I have also tried setting it true so it would always be visible but it just wouldn't work.
I would like to ask if this Collapse element is outdated or something, or am I missing something here?
Thanks in advance.
I tried following many and many tutorials, blogs, questions. Some of these are the error causing way that I have done at first though it should not. And some other ways get rid of the errors, but they simply don't work.
As Konrad suggested, isOpen was needed. The problem is solved.