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

CodePudding user response：

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.

CodePudding user response：

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.