class vs className consumption
See original GitHub issueAfter 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?
Issue Analytics
- State:
- Created 6 years ago
- Comments:9 (6 by maintainers)
Top Results From Across the Web
class vs className in React 16 - Stack Overflow
class is a keyword in javascript and JSX is an extension of javascript. That's the principal reason why React uses className instead of ......
Read more >Why React uses className over class attribute
Explanation: The only reason behind the fact that it uses className over class is that the class is a reserved keyword in JavaScript...
Read more >class vs className - Learn React - Codecademy
You have to use className instead: <h1 className="big">Hey</h1>. This is because JSX gets translated into JavaScript, and class is a reserved word in ......
Read more >class vs className consumption #942 - preactjs/preact - GitHub
You can use class or className , whichever you want. But Preact doesn't convert className to class as a property. It accepts both/either...
Read more >Benchmark tests: style vs. className - QuirksBlog - QuirksMode
Correct me if I'm wrong, but doesn't the use of className require that your classes be fixed and defined ahead of time? If...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@bodaz you need to reference it as
style['image-item']
:Better to post these types of unrelated questions on Slack or StackOverflow btw.
Just destructure-rename it: