Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use null instead of '' in ternary expression #5533

Merged
merged 1 commit into from
Nov 23, 2015
Merged

Use null instead of '' in ternary expression #5533

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/tips/03-if-else-in-JSX.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");
That's not valid JS. You probably want to make use of a ternary expression:

```js
ReactDOM.render(<div id={condition ? 'msg' : ''}>Hello World!</div>, mountNode);
ReactDOM.render(<div id={condition ? 'msg' : null}>Hello World!</div>, mountNode);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change is fine but is unrelated to the rest of your description. This is for the id attribute and will never render to <span>

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah you're right, I didn't read the full example. It seems to me that null or false is a better convention than '', as the behavior is the same aside from '' creating extra <span> tags.

Perhaps it would be better yet if empty strings were treated like null but I am not sure if that is possible.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nah, we have no intention of null and empty string being the same. They are very different values. In this case the empty string will create markup with <div id=""> whereas null will be <div>. While it might not matter for ids, it's not a safe assumption that all attributes will treat those 2 cases the same.

Anyway, I'll take this since the change is good. Thanks!

```

If a ternary expression isn't robust enough, you can use `if` statements outside of your JSX to determine which components should be used:
Expand Down