[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.

Default image
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.

One comment

Leave a Reply

  1. 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!

%d bloggers like this: