[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

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.