react.dev/03-if-else-in-JSX.md at 1ec56bea0dcce2013decaab261c02d016cebd459

mirror of https://github.com/reactjs/react.dev.git synced 2026-02-22 03:42:14 +00:00

Files

Daniel Lo Nigro d457201862 Upgrade to Jekyll 3

Full list of changes is at https://jekyllrb.com/docs/upgrading/2-to-3/. The tl;dr of it is:
 - Relative permalinks were removed, so all the files in the `docs` subdirectory need their permalink to be prefixed with `docs/`
 - `post` and `page` types were renamed to `posts` and `pages` respectively
 - `jekyll-paginate`, `pygments` and `redcarpet` are all now optional, so I needed to explicitly add it to the Gemfile. Jekyll now uses `rouge` rather than `pygments` for syntax highlighting, but rouge does not support highlighting individual lines (`hl_lines`) so we need to continue using Pygments.
 - Layout metadata (eg. `sectionid`) is now on a `layout` variable rather than `page`

Tested the following pages and confirmed that they all work:
 - "Docs" link (getting started page): http://127.0.0.1:4000/react/docs/getting-started.html
 - Downloads: http://127.0.0.1:4000/react/downloads.html
 - Tutorial: http://127.0.0.1:4000/react/docs/tutorial.html
 - A few pages under the "docs" subdirectory, to confirm they're working properly:
    - http://127.0.0.1:4000/react/docs/addons.html
 - http://127.0.0.1:4000/react/docs/why-react.html
 - http://127.0.0.1:4000/react/docs/create-fragment.html
 - A few tips:
    - http://127.0.0.1:4000/react/tips/false-in-jsx.html
 - http://127.0.0.1:4000/react/tips/style-props-value-px.html
 - Non-English versions of the page:
    - http://127.0.0.1:4000/react/docs/getting-started-it-IT.html
    - http://127.0.0.1:4000/react/docs/getting-started-ja-JP.html

2016-07-19 12:18:49 -07:00

2.1 KiB

Raw Blame History

id, title, layout, permalink, prev, next

id	title	layout	permalink	prev	next
if-else-in-JSX	If-Else in JSX	tips	tips/if-else-in-JSX.html	inline-styles.html	self-closing-tag.html

if-else statements don't work inside JSX. This is because JSX is just syntactic sugar for function calls and object construction. Take this basic example:

// This JSX:
ReactDOM.render(<div id="msg">Hello World!</div>, mountNode);

// Is transformed to this JS:
ReactDOM.render(React.createElement("div", {id:"msg"}, "Hello World!"), mountNode);

This means that if statements don't fit in. Take this example:

// This JSX:
<div id={if (condition) { 'msg' }}>Hello World!</div>

// Is transformed to this JS:
React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");

That's not valid JS. You probably want to make use of a ternary expression:

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

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

var loginButton;
if (loggedIn) {
  loginButton = <LogoutButton />;
} else {
  loginButton = <LoginButton />;
}

return (
  <nav>
    <Home />
    {loginButton}
  </nav>
);

Or if you prefer a more "inline" aesthetic, define immediately-invoked function expressions inside your JSX:

return (
  <section>
    <h1>Color</h1>
    <h3>Name</h3>
    <p>{this.state.color || "white"}</p>
    <h3>Hex</h3>
    <p>
      {(() => {
        switch (this.state.color) {
          case "red":   return "#FF0000";
          case "green": return "#00FF00";
          case "blue":  return "#0000FF";
          default:      return "#FFFFFF";
        }
      })()}
    </p>
  </section>
);

Note:

In the example above, an ES6 arrow function is utilized to lexically bind the value of this.

Try using it today with the Babel REPL.

2.1 KiB Raw Blame History

2.1 KiB

Raw Blame History