import React from "react";
const CodeWishper = () => {
return (
<form className="form-inline" name="newMessage">
<fieldset name="fields">
<input type="text" className="form-control" name="newMessage" placeholder="Type a new message" />
<button type="submit" name className="btn btn-primary">Say something</button>
</fieldset>
</form>
)}
export default CodeWishper;
Solution:
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.
import React from "react";
const CodeWishper = () => {
return (
<form className="form-inline" name="newMessage">
<fieldset name="fields">
<input type="text" className="form-control" name="newMessage" placeholder="Type a new message" />
<button type="submit" className="btn btn-primary">Say something</button>
</fieldset>
</form>
)}
export default CodeWishper;
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.
import React from "react";
const CodeWishper = ({value}) => {
return (
<form className="form-inline" name="newMessage">
<fieldset name="fields">
<input type="text" className="form-control" name="newMessage" placeholder="Type a new message" />
<button type="submit" name={value ? 1 : 0} className="btn btn-primary">Say something</button>
</fieldset>
</form>
)}
export default CodeWishper;
$
prefix to attribute: or, I can also use Add ‘$’ prefixed attribute name to solve the warning message issue.
<CodeWishper $name={value ? true: false} />
Summary
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.
I was facing the similar console issue and in my case it was familiar to Problem 1 and i needed it to be passing so instead of removing it , i did data={props.data} (instead of only data) , that solved my issue! Removing it will do only if you’re sure that it is not needed anywhere else but whenever u need it or not sure you can try the above one!