31:T599,{ const doc = md ` In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application. Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like [\`if\`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) or the [conditional operator](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) to create elements representing the current state, and let React update the UI to match them. Consider these two components: \`\`\`js function UserGreeting(props) { return

Welcome back!

; } function GuestGreeting(props) { return

Please sign up.

; } \`\`\` We’ll create a \`Greeting\` component that displays either of these components depending on whether a user is logged in: \`\`\`js function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return ; } return ; } ReactDOM.render( // Try changing to isLoggedIn={true}: , document.getElementById('root') ); \`\`\` [**Try it on CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011) This example renders a different greeting depending on the value of \`isLoggedIn\` prop. `; return hide_display(option1, doc); }32:T7db,{ const doc = md` You can use variables to store elements. This can help you conditionally render a part of the component while the rest of the output doesn’t change. Consider these two new components representing Logout and Login buttons: \`\`\`js function LoginButton(props) { return ( ); } function LogoutButton(props) { return ( ); } \`\`\` In the example below, we will create a [stateful component](https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class) called \`LoginControl\`. It will render either \`\` or \`\` depending on its current state. It will also render a \` \` from the previous example:\ \`\`\`js class LoginControl extends React.Component { constructor(props) { super(props); this.handleLoginClick = this.handleLoginClick.bind(this); this.handleLogoutClick = this.handleLogoutClick.bind(this); this.state = {isLoggedIn: false}; } handleLoginClick() { this.setState({isLoggedIn: true}); } handleLogoutClick() { this.setState({isLoggedIn: false}); } render() { const isLoggedIn = this.state.isLoggedIn; let button; if (isLoggedIn) { button = ; } else { button = ; } return (

{button}

); } } ReactDOM.render( , document.getElementById('root') ); \`\`\` [**Try it on CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010) While declaring a variable and using an \`if\` statement is a fine way to conditionally render a component, sometimes you might want to use a shorter syntax. There are a few ways to inline conditions in JSX, explained below. `; return hide_display(option2, doc) }33:T66c,{ const root = html`

`; // from previous code examples *********** function UserGreeting(props) { return htm`

Welcome back!

`; } function GuestGreeting(props) { return htm`

Please sign up.

`; } function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return htm`<${UserGreeting} />`; } return htm`<${GuestGreeting} />`; } // ************ function LoginButton(props) { return htm` `; } function LogoutButton(props) { return htm` `; } class LoginControl extends React.Component { constructor(props) { super(props); this.handleLoginClick = this.handleLoginClick.bind(this); this.handleLogoutClick = this.handleLogoutClick.bind(this); this.state = {isLoggedIn: true}; // try false or true } handleLoginClick() { this.setState({isLoggedIn: true}); } handleLogoutClick() { this.setState({isLoggedIn: false}); } render() { const isLoggedIn = this.state.isLoggedIn; let button; if (isLoggedIn) { button = htm`<${LogoutButton} onClick=${this.handleLogoutClick} />`; } else { button = htm`<${LoginButton} onClick=${this.handleLoginClick} />`; } return htm`

<${Greeting} isLoggedIn=${isLoggedIn} /> ${button}

`; } } ReactDOM.render( htm`<${LoginControl} />`, root ); return root; }34:T4a5,{ const doc = md` You may [embed any expressions in JSX](https://reactjs.org/docs/introducing-jsx.html#embedding-expressions-in-jsx) by wrapping them in curly braces. This includes the JavaScript logical \`&&\` operator. It can be handy for conditionally including an element: \`\`\`js function Mailbox(props) { const unreadMessages = props.unreadMessages; return (

Hello!

{unreadMessages.length > 0 &&

You have {unreadMessages.length} unread messages.

}

); } const messages = ['React', 'Re: React', 'Re:Re: React']; ReactDOM.render( , document.getElementById('root') ); \`\`\` [**Try it on CodePen**](https://codepen.io/gaearon/pen/ozJddz?editors=0010) It works because in JavaScript, \`true && expression\` always evaluates to \`expression\`, and \`false && expression\` always evaluates to \`false\`. Therefore, if the condition is \`true\`, the element right after \`&&\` will appear in the output. If it is \`false\`, React will ignore and skip it. `; return hide_display(option3, doc); } 35:T4cb,{ const doc = md` Another method for conditionally rendering elements inline is to use the JavaScript conditional operator [\`condition ? true : false\`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator). In the example below, we use it to conditionally render a small block of text. \`\`\`js render() { const isLoggedIn = this.state.isLoggedIn; return (

The user is {isLoggedIn ? 'currently' : 'not'} logged in.

); } \`\`\` It can also be used for larger expressions although it is less obvious what’s going on: \`\`\`js render() { const isLoggedIn = this.state.isLoggedIn; return (

{isLoggedIn ? ( ) : ( )}

); } \`\`\` Just like in JavaScript, it is up to you to choose an appropriate style based on what you and your team consider more readable. Also remember that whenever conditions become too complex, it might be a good time to [extract a component](https://reactjs.org/docs/components-and-props.html#extracting-components). `; return hide_display(option4, doc); }36:T59a,{ const root = html`

`; // from previous code examples *********** function UserGreeting(props) { return htm`

Welcome back!

`; } function GuestGreeting(props) { return htm`

Please sign up.

The user is ${isLoggedIn ? 'currently' : 'not'} logged in.

`; } } ReactDOM.render( htm`<${LoginControl} />`, root ); return root; }37:T71d,{ const root = html`

`; // from previous code examples *********** function UserGreeting(props) { return htm`

Welcome back!

`; } function GuestGreeting(props) { return htm`

Please sign up.

`; } function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return htm`<${UserGreeting} />`; } return htm`<${GuestGreeting} />`; } // ************ function LoginButton(props) { return htm` `; } function LogoutButton(props) { return htm` `; } class LoginControl extends React.Component { constructor(props) { super(props); this.handleLoginClick = this.handleLoginClick.bind(this); this.handleLogoutClick = this.handleLogoutClick.bind(this); this.state = {isLoggedIn: false}; // try false or true } handleLoginClick() { this.setState({isLoggedIn: true}); } handleLogoutClick() { this.setState({isLoggedIn: false}); } render() { const isLoggedIn = this.state.isLoggedIn; let button; // if (isLoggedIn) { // button = htm`<${LogoutButton} onClick=${this.handleLogoutClick} />`; // } else { // button = htm`<${LoginButton} onClick=${this.handleLoginClick} />`; // } button = isLoggedIn ? htm`<${LogoutButton} onClick=${this.handleLogoutClick} />` : htm`<${LoginButton} onClick=${this.handleLoginClick} />`; return htm`

<${Greeting} isLoggedIn=${isLoggedIn} /> ${button}

`; } } ReactDOM.render( htm`<${LoginControl} />`, root ); return root; }38:T5a8,{ const doc = md` In rare cases you might want a component to hide itself even though it was rendered by another component. To do this return \`null\` instead of its render output. In the example below, the \`\` is rendered depending on the value of the prop called \`warn\`. If the value of the prop is \`false\`, then the component does not render: \`\`\`js function WarningBanner(props) { if (!props.warn) { return null; } return (

Warning!

); } class Page extends React.Component { constructor(props) { super(props); this.state = {showWarning: true}; this.handleToggleClick = this.handleToggleClick.bind(this); } handleToggleClick() { this.setState(state => ({ showWarning: !state.showWarning })); } render() { return (

); } } ReactDOM.render( , document.getElementById('root') ); \`\`\` [**Try it on CodePen**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010) Returning \`null\` from a component’s \`render\` method does not affect the firing of the component’s lifecycle methods. For instance \`componentDidUpdate\` will still be called. `; return hide_display(option5, doc); }39:[] 2f:{"title":"Conditional Rendering","cells":[{"id":0,"value":"TOC = {\n\n addList(\"TOC\", \"table of content\", 1);\n \n return md`# Conditional Rendering\nhttps://reactjs.org/docs/conditional-rendering.html\n\n## Table of Content\n`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"toc = html`

\n ${d.id + \" =>\"}\n ${d.des}\n

` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"conditional = {\n addList(\"conditional\", \"conditional rendering\", 2);\n return md`## conditional rendering`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"viewof option1 = DOM.select(none_doc);","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"{\n const root = html`

`;\n \n function UserGreeting(props) {\n return htm`

Welcome back!

`;\n }\n\n function GuestGreeting(props) {\n return htm`

Please sign up.

`;\n }\n\n function Greeting(props) {\n const isLoggedIn = props.isLoggedIn;\n if (isLoggedIn) {\n return htm`<${UserGreeting} />`;\n }\n return htm`<${GuestGreeting} />`;\n }\n\n ReactDOM.render(\n // Try changing to isLoggedIn={true}:\n htm`<${Greeting} isLoggedIn=${true} />`,\n root\n );\n \n return root;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"element = {\n addList(\"element\", \"Element Variable\", 3);\n return md`### Element Variables`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"viewof option2 = DOM.select(none_doc);","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":388,"value":"inlineIF = {\n addList(\"inlineIF\", \"Inline If with Logical && Operator\", 4);\n return md`### Inline If with Logical && Operator\nhttps://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"viewof option3 = DOM.select(none_doc);","pinned":true,"hidden":false,"mode":"ojs"},{"id":386,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"{ \n \n const root = html`

`;\n \n function Mailbox(props) {\n const unreadMessages = props.unreadMessages;\n return htm`\n

Hello!

\n ${unreadMessages.length > 0 &&\n htm`

\n You have ${unreadMessages.length} unread messages.\n

`\n }\n

\n `;\n }\n\n const messages = ['React', 'Re: React', 'Re:Re: React'];\n console.log(messages.length);\n ReactDOM.render(\n htm`<${Mailbox} unreadMessages=${messages} />`,\n root\n );\n \n return root;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":426,"value":"inlineIFElse = {\n addList(\"inlineIFElse\", \"Inline If-Else with Conditional Operator\", 5);\n return md`### Inline If-Else with Conditional Operator\nhttps://reactjs.org/docs/conditional-rendering.html#inline-if-else-with-conditional-operator\n`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"viewof option4 = DOM.select(none_doc);","pinned":true,"hidden":false,"mode":"ojs"},{"id":425,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":434,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":443,"value":"noRender = {\n addList(\"noRender\", \"Preventing Component from Rendering\", 6);\n return md`\n### Preventing Component from Rendering\nhttps://reactjs.org/docs/conditional-rendering.html#preventing-component-from-rendering\n`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":446,"value":"viewof option5 = DOM.select(none_doc);","pinned":true,"hidden":false,"mode":"ojs"},{"id":442,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"{\n \n const root = html`

`;\n \n function WarningBanner(props) {\n if (!props.warn) {\n return null;\n }\n\n return htm`\n

\n Warning!\n

\n `;\n }\n\n class Page extends React.Component {\n constructor(props) {\n super(props);\n this.state = {showWarning: true};\n this.handleToggleClick = this.handleToggleClick.bind(this);\n }\n\n handleToggleClick() {\n this.setState(state => ({\n showWarning: !state.showWarning\n }));\n }\n\n render() {\n return htm`\n

\n <${WarningBanner} warn=${this.state.showWarning} />\n \n

\n `;\n }\n }\n\n const element = htm`<${Page} />`;\n ReactDOM.render(\n element,\n root\n );\n \n return root;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"utils = {\n addList(\"utils\", \"libs and methods required\", 7);\n return md`---\n## Utils`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"mutable list = [];","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"// toc = html`

\n// ${d.id + \" =>\"}\n// ${d.des}\n//

` ","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"html`\n \n ${d3.schemeCategory10.map((color, i) => html`\n \n \n \n `)}\n

#	Color	Swatch
${i}	${color}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"function addList(id, des, idx) {\n let list = mutable list;\n\n // feature: make sure no replicate of id\n if (list.filter(item => id === item.id).length > 0) {\n return ;// don't add anything to the list \n }\n list.push({id: id, des: des, idx: idx});\n mutable list = list;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":458,"value":" list.filter(item => \"utils\" === item.id)","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"// import {html, svg} from \"@observablehq/htl\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"import {React, ReactDOM, htm, none_doc, hide_display} from \"@embracelife/tutorial-utilities\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}