[Solved] Warning: Received `true` for a non-boolean attribute `name`. If you want to write it to the DOM, pass a string instead: name="true" or name={value.toString()} in reactJs


I had faced this “Received true for a non-boolean attribute” error two times while passing the parameter boolean as true/false or passing ‘no/null value to the props.

Problem 1: Pass the ‘no/null value to the props.

Solution 1: React is treating it as a prop with boolen type

I was just using online HTML to JSX converter like https://magic.reactjs.net/htmltojsx.htm . while it converting the HTML to JSX, sometimes it is writing an invalid prototype, so react is treating it as a prop with boolean type. so, that’s the reason I was getting the below error.

So, I just removed the invalid prop ‘name’ in my case, since I was not using it my component and the error got solved. The final code is copied below.

Problem 2: pass a boolean for a custom boolean attribute

Solution 2:

Instead of passing true/false values ​​to the props, I passed 1/0 values ​​to the prop, the code was copied down after the code was changed, so it eliminates the warning message.

 $ prefix to attribute: or, I can also use Add ‘$’ prefixed attribute name to solve the warning message issue.

<CodeWishper  $name={value ? true: false} />


In short, the warning message comes in react when passing the parameter boolean as true/false or passing ‘no/null value to the props. by accidentally or online tools generating JSX code snippets the error comes in common. so the above solutions are helpful to get rid of the warning message. Hope you find them helpful.

Shivaraju M

Over 3+ years experience in IT industry, good knowledge in . Net-based Web applications, windows applications, web services, and SPAs. I have played multiple roles related to technical delivery in multiple domains while working on over 10+ technologies. I am currently focused on continuous improvement and agile project management.

Post a Comment

Previous Post Next Post