Genericize image names

This commit is contained in:
Chalarangelo
2021-06-12 18:03:28 +03:00
parent 19f228760a
commit 52d3d94e84
90 changed files with 50 additions and 50 deletions

View File

@ -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])`).