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

Solution 1:^[1]

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.

Solution 2:^[2]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	wuarmin
Solution 2	Alireza Jahandoost

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

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]