CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-reduxjsx
kkongkk
kkongkk

Reputation: 107

Warning on render : Received `true` for a non-boolean attribute `className`

GEtting the following error for the div.container and span.text:

Warning: Received true for a non-boolean attribute className.

If you want to write it to the DOM, pass a string instead: className="true" or className={value.toString()}.

  return (
    Array.isArray(contactDetails) &&
    contactDetails.map((item, index) => {
      return item.type === DIVIDER ? (
        <div key={index}>
          <Divider variant={"middle"} className={classes.divider} />
          <div className={classes.dividerText}>{item.text}</div>
        </div>
      ) : (
        item.text && (
          <div className={classes.container} key={index}>
            <div className={classes.icon}>{item.icon}</div>
            <span className={classes.text}>{item.text}</span>
          </div>
        )

Upvotes: 2

Views: 9153

Answers (3)

Emre
Emre

Reputation: 21

I got the same error when i didn't give a value to className attribute like below, probably one of your variable is null or boolean etc.

<img className src={...} .../>

Upvotes: 0

Alireza Jahandoost
Alireza Jahandoost

Reputation: 130

It means at least one of the className values is boolean instead of string. we can not say anything more with this piece of code.

Upvotes: 1

wuarmin
wuarmin

Reputation: 4015

One of your classes-props is a boolean. You cannot push a boolean (true/false) to className.

You could console.log(classes), then you will see, which prop causes the warning.

Upvotes: 4

Related Questions