Genericize image names
This commit is contained in:
@ -3,7 +3,7 @@ title: "Tip: React conditional className, empty strings and null"
|
||||
type: tip
|
||||
tags: react,components
|
||||
authors: maciv
|
||||
cover: blog_images/react-conditional-classname.jpg
|
||||
cover: blog_images/succulent-red-light.jpg
|
||||
excerpt: When developing React components, you might often need to conditionally apply a className. Learn how to handle empty classNames correctly using this handy tip.
|
||||
---
|
||||
|
||||
@ -29,7 +29,7 @@ ReactDOM.render(
|
||||
);
|
||||
```
|
||||
|
||||
In the code example above, we create two very similar components, both of which conditionally set the `className` of an element based on the value of the `enabled` prop. The first one will set the `className` to an empty string if `enabled` is `false` and the second one will set it to `null`.
|
||||
In the code example above, we create two very similar components, both of which conditionally set the `className` of an element based on the value of the `enabled` prop. The first one will set the `className` to an empty string if `enabled` is `false` and the second one will set it to `null`.
|
||||
|
||||
Both will result in a very similar output, however, if you carefully inspect the HTML, you will notice that the first one will render `<div class>Hi</div>` whereas the second one will render `<div>Hi</div>`. This kind of markup (an attribute being present but without value) is rather uncommon and you'd rarely ever see something like that without React. This subtle difference is quite important and might be the root of a lot of problems, especially when trying to select elements with/without any classes using CSS selectors (e.g. `[class]`/`:not([class])`).
|
||||
|
||||
|
||||
Reference in New Issue
Block a user