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

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>
        )

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>
        )

• javascript
• reactjs
• react-native
• react-redux
• jsx

Share Improve this question Follow asked Mar 28, 2022 at 14:22 kkongkkkkongkk 10722 silver badges88 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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.

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.

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={...} .../>