class vs className consumption

After reading https://github.com/developit/preact/issues/103

I would think that this would work:

const componentA = () => {
    return (
        <ComponentB class="yyy">
            Hello World
        </ComponentB>
    )
}

const componentB = () => {
    const { children, className, ...other } = this.props;

    return (
        <div class={ className } { ...other }>
            { children }
        </div>
    )
};

// Expected output: <div class="yyy">Hello World</div>
// Real output: <div>Hello World</div>

In componentB, className is undefined when componentA passes class as the prop (the preact recommendation), whereas in componentB this.props.class does equal “yyy”

In my understanding, in componentB, I should be able to use this.props.className as well as this.props.class regardless of how the prop is passed in componentA. Am I under the wrong assumption?

[developit]

@bodaz you need to reference it as style['image-item']:

// Card component
import { h, Component } from "preact";
import cx from "classnames";
import style from "./style";

export const Card = () => {
  return (
    <div class={style.card}>
      <div class={cx(style.image, style['image-item'])} />
      <div class={style.body} />
    </div>
  );
};

// in style.scss
.card {
  .image-item {
    margin-bottom: 23px;
  }
}

Better to post these types of unrelated questions on Slack or StackOverflow btw.

[mitranim]

Just destructure-rename it:

function InnerView({class: className}) {/* ... */}