From 977690b22632b55ad8d09cdcbf65f60930db3083 Mon Sep 17 00:00:00 2001
From: Jamie Kyle <jamie.kyle@eventbrite.com>
Date: Fri, 23 Aug 2019 15:16:53 -0700
Subject: [PATCH 1/4] update logic & jsx rule, add refactors directory, with
 logic and jsx refactor

---
 react/README.md                               | 184 ++++-
 refactors/README.md                           |  65 ++
 refactors/logic-and-jsx/0-OriginalFile.js     | 336 +++++++++
 refactors/logic-and-jsx/1-NoDestructuring.js  | 332 +++++++++
 .../logic-and-jsx/2-SplitConditionals.js      | 381 ++++++++++
 refactors/logic-and-jsx/3-InlineLogic.js      | 307 ++++++++
 .../logic-and-jsx/4-PullIntoComponents.js     | 378 ++++++++++
 refactors/logic-and-jsx/README.md             | 663 ++++++++++++++++++
 8 files changed, 2624 insertions(+), 22 deletions(-)
 create mode 100644 refactors/README.md
 create mode 100644 refactors/logic-and-jsx/0-OriginalFile.js
 create mode 100644 refactors/logic-and-jsx/1-NoDestructuring.js
 create mode 100644 refactors/logic-and-jsx/2-SplitConditionals.js
 create mode 100644 refactors/logic-and-jsx/3-InlineLogic.js
 create mode 100644 refactors/logic-and-jsx/4-PullIntoComponents.js
 create mode 100644 refactors/logic-and-jsx/README.md

diff --git a/react/README.md b/react/README.md
index 6d69b5e..00ca0db 100644
--- a/react/README.md
+++ b/react/README.md
@@ -1621,49 +1621,189 @@ In addition to `render()` being the _last_ method in a component (see [Method or
 
 ### Logic and JSX
 
-React and JSX supporting logic and markup in the same file allows for substantial complexity in markup generation over other traditional templating languages (like [handlebars](http://handlebarsjs.com)). But with that increased complexity can come a decrease in readability.
+> **Note:** This rule was changed from a previous version that said the
+> opposite, read the [refactoring](../refactors/logic-and-jsx) that explains why.
 
-In order to maximize both complexity and readability, we suggest keeping all logic out of JSX, except variable references and method calls. Expressions, particularly ternary expressions, should be stored in variables outside of JSX.
+A single component's returned JSX code can get quite complex with lots of
+expressions. But instead of pulling those expressions out into variables and
+statements, you should focus on pulling out parts of the JSX into seperate
+components, and some of the logic into utility functions.
 
 ```js
-// good
-render() {
-    let {includeHeader} = this.props;
-    let buttons = [1, 2, 3, 4, 5].map((page) => (
-        <Button key={page} onClick={this._handlePageClick.bind(this, page)} />
-    ));
-    let header;
+// good (inlining all JSX/simple logic and abstracting complex JSX into separate components)
+function Component1(props) {
+    return <SomeComponent kind="gah" foo={props.foo} baz={props.baz} />;
+}
+
+function Component2(props) {
+    return <SomeComponent kind="goop" bar={bar} baz={baz} />;
+}
+
+class MyComponent extends React.Component {
+    render() {
+        return (
+            <div>
+                {cond && otherCond && (
+                    <Component1 foo={this.props.foo} baz={this.state.baz} />
+                )}
+                {cond && !otherCond && (
+                    <Component2 bar={this.props.bar} baz={this.state.baz} />
+                )}
+            </div>
+        );
+    }
+}
 
-    if (includeHeader) {
-        header = (<h2>Pagination</h2>);
+// bad (hard to refactor into seperate components / moves JSX around)
+class MyComponent extends React.Component {
+    render() {
+        let { foo, bar } = this.props;
+        let { baz } = this.state;
+
+        let element1 = null;
+        let element2 = null;
+
+        if (cond) {
+            if (otherCond) {
+                element1 = <SomeComponent kind="gah" foo={foo} baz={baz} />;
+            } else {
+                element2 = <SomeComponent kind="goop" bar={bar} baz={baz} />;
+            }
+        }
+
+        return (
+            <div>
+                {element1}
+                {element2}
+            </div>
+        );
     }
+}
+```
+
+This might seem unnatural at first if you aren't familiar with writing React
+code this way. But if you start splitting JSX into logical statements, you end
+up with code that is hard to pull out into separate components, making your code
+less refactorable (and maintainable as a result).
+
+See [Helper components](#helper-components) for another way to help keep `render()` lean.
+
+#### Logic and JSX Tip #1: Complex Conditionals
+
+Sometimes inline JSX conditionals will get really complex. This can be hard to
+describe which logic is complex and which is not. But if it starts to become
+hard to read at a glance, you might want to pull that logic out into a small
+utility function.
 
+```jsx
+// bad (complex inline conditions)
+function MyComponent(props) {
     return (
         <div>
-            {header}
-            {buttons}
+            {(props.foo === CONSTANT_VALUE && props.bar !== CONSTANT_VALUE) ||
+                (props.foo !== CONSTANT_VALUE &&
+                    props.bar === CONSTANT_VALUE && (
+                        <div>Hello, I have a complex conditional render</div>
+                    ))}
+            {typeof props.baz === 'object' &&
+                    props.baz !== null &&
+                    !Array.isArray(props.baz) &&
+                    Object.keys(props.baz).length > 1 && (
+                        <div>
+                            Hello, I also have a complex conditional render
+                        </div>
+                    )}
         </div>
     );
 }
 
-// bad (expressions in JSX)
-render() {
-    let {includeHeader} = this.props;
+// good (small utils for the conditional logic that we pass info into)
+function xorEq(a, b, value) {
+    if (a === value && b !== value) return true;
+    if (a !== value && b === value) return true;
+    return false;
+}
+
+function isPlainObject(val) {
+    return typeof val === 'object' && val !== null && !Array.isArray(val);
+}
+
+function isEmptyObject(obj) {
+    return Object.keys(obj).length === 0
+}
 
+function MyComponent(props) {
     return (
         <div>
-            {includeHeader ? (<h2>Pagination</h2>) : null}
-            {[1, 2, 3, 4, 5].map((page) => (
-                <Button key={page} onClick={this._handlePageClick.bind(this, page)} />
-            ))}
+            {xorEq(props.foo, props.bar, CONSTANT_VALUE) && (
+                <div>Hello, I have a complex conditional render</div>
+            )}
+            {isPlainObject(props.baz) && !isEmptyObject(props.baz) && (
+                <div>Hello, I also have a complex conditional render</div>
+            )}
         </div>
     );
 }
 ```
 
-The above "bad" example doesn't seem so bad right? But as we know, code tends to grow over time. If we add more expressions, add more markup to the header, or the map gets more more logic, the code will become unwieldy. Setting up this guideline, even in the most simple examples, helps set the code along the right path.
+#### Logic and JSX Tip #2: Computed Data
 
-See [Helper components](#helper-components) for another way to help keep `render()` lean.
+Sometimes when you're writing JSX you'll start to compute data inline using
+functions like `array.map/reduce/filter/etc`. However, it's better to pull that
+logic out into separate functions, and store the data in variables before the
+JSX code.
+
+```js
+// bad (complex computed data written inline)
+function MyComponent(props) {
+    return (
+        <ul>
+            {Object.keys(props.items)
+                .reduce((items, key) => {
+                    return [...items, props.items[key]];
+                }, [])
+                .map((item, index) => {
+                    return { ...item, index };
+                })
+                .filter(item => {
+                    return matchFields(item.fields, props.searchQueryFields);
+                })
+                .map(item => {
+                    return <div key={item.id}>...</div>;
+                })}
+        </ul>
+    );
+}
+
+// good (computations pulled out into their own functions, stored in variables before JSX)
+function convertToItemsArray(items) {
+    return Object.keys(items)
+        .reduce((arr, key) => {
+            return [...arr, items[key]];
+        }, [])
+        .map((item, index) => {
+            return { ...item, index };
+        });
+}
+
+function filterItems(items, searchQueryFields) {
+    return items.filter(item => {
+        return matchFields(item.fields, searchQueryFields);
+    });
+}
+
+function MyComponent(props) {
+    let items = convertToItemsArray(props.items);
+    let filteredItems = filterItems(items, props.searchQueryFields);
+    return (
+        <ul>
+            {filteredItems.map(item => {
+                return <div key={item.id}>...</div>;
+            })}
+        </ul>
+    );
+}
+```
 
 **[⬆ back to top](#table-of-contents)**
 
diff --git a/refactors/README.md b/refactors/README.md
new file mode 100644
index 0000000..0597de5
--- /dev/null
+++ b/refactors/README.md
@@ -0,0 +1,65 @@
+# Eventbrite JavaScript Refactors
+
+> Guided refactorings of real (but redacted) Eventbrite Frontend code.
+
+## [1. Logic and JSX](./logic-and-jsx)
+
+> Refactoring a large `render()` method with lots of long if-then conditional
+> logic into separate components and inline JSX logic. (Also: Reasons why
+> destructuring is bad for refactoring code).
+
+**Before:**
+
+```jsx
+class MyComponent extends React.Component {
+    render() {
+        let { foo, bar } = this.props;
+        let { baz } = this.state;
+
+        let element1 = null;
+        let element2 = null;
+
+        if (cond) {
+            if (otherCond) {
+                element1 = <SomeComponent kind="gah" foo={foo} baz={baz} />;
+            } else {
+                element2 = <SomeComponent kind="goop" bar={bar} baz={baz} />;
+            }
+        }
+
+        return (
+            <div>
+                {element1}
+                {element2}
+            </div>
+        );
+    }
+}
+```
+
+**After:**
+
+```jsx
+function Component1(props) {
+    return <SomeComponent kind="gah" foo={props.foo} baz={props.baz} />;
+}
+
+function Component2(props) {
+    return <SomeComponent kind="goop" bar={bar} baz={baz} />;
+}
+
+class MyComponent extends React.Component {
+    render() {
+        return (
+            <div>
+                {cond && otherCond && (
+                    <Component1 foo={this.props.foo} baz={this.state.baz} />
+                )}
+                {cond && !otherCond && (
+                    <Component2 bar={this.props.bar} baz={this.state.baz} />
+                )}
+            </div>
+        );
+    }
+}
+```
diff --git a/refactors/logic-and-jsx/0-OriginalFile.js b/refactors/logic-and-jsx/0-OriginalFile.js
new file mode 100644
index 0000000..3c02ae6
--- /dev/null
+++ b/refactors/logic-and-jsx/0-OriginalFile.js
@@ -0,0 +1,336 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
+import isEmpty from 'lodash/isEmpty';
+import gettext from 'js-utils/gettext';
+
+import BankGraphicSvg from 'eventbrite_design_system/iconography/icons/BankGraphic';
+import DataTable from 'eventbrite_design_system/dataTable/DataTable';
+import Dialog from 'eventbrite_design_system/dialog/Dialog';
+import EmptyState from 'eventbrite_design_system/emptyState/EmptyState';
+import Modal from 'eventbrite_design_system/modal/Modal';
+import Pagination from 'eventbrite_design_system/pagination/Pagination';
+import SelectField from 'eventbrite_design_system/inputField/SelectField';
+
+import {
+    ACCOUNT_SETTINGS_LIST_COLUMNS as columns,
+    DELETION_ALLOWED,
+    DELETION_EVENT_ASSOCIATED,
+    DELETION_API_ERROR_ASSOCIATED,
+    UPDATE_PAYMENT_INSTRUMENT_MODAL,
+    FORM_FROM_INSTRUMENT_TYPE,
+} from '../constants';
+import {
+    EMPTY_STATE_MESSAGE,
+    INSTRUMENT_TYPES_VALUE_DISPLAY,
+    INSTRUMENT_TYPES_NON_EPP_VALUE_DISPLAY,
+    PAYMENT_INSTRUMENT_PAGINATION,
+    VIEW_TYPE_LABEL,
+    MODAL_UPDATE_TITLE_PAYMENT_INSTRUMENT,
+} from '../constants/financialProfile';
+import {
+    PAYMENT_INSTRUMENTS_LIST_PROPS,
+    EVENT_LIST_PROPS,
+    API_ERROR_HANDLING_PROPS,
+} from '../constants/proptypes';
+
+import EventsModal from './EventsModal';
+import { itemPaymentInstrument } from './financialProfileUtils/PaymentInstrument';
+import PaypalForm from './financialProfileUtils/PaypalForm';
+import AuthnetForm from './financialProfileUtils/AuthnetForm';
+import InProgressDialog from './financialProfileUtils/InProgressDialog';
+
+function InstrumentFilter({ onFilterChange, filterValues, filterValue }) {
+    return (
+        <div className="eds-g-cell eds-g-cell-3-12 eds-align--left eds-l-mar-top-10">
+            <SelectField
+                onChange={props.onFilterChange}
+                name="instrumentTypes"
+                label={VIEW_TYPE_LABEL}
+                values={filterValues}
+                value={filterValue}
+            />
+        </div>
+    );
+}
+
+function PaymentInstrumentTable({ items }) {
+    return (
+        <div className="eds-g-cell eds-g-cell-1-1">
+            <DataTable items={items} columns={columns} />
+        </div>
+    );
+}
+
+export default class PayoutMethodSummary extends PureComponent {
+    static propTypes = {
+        handlePageChange: PropTypes.func,
+        handleDeleteInstrument: PropTypes.func,
+        paymentInstruments: PAYMENT_INSTRUMENTS_LIST_PROPS,
+        isEventsModalOpen: PropTypes.bool,
+        showEventsModal: PropTypes.func,
+        hideEventsModal: PropTypes.func,
+        getEvents: PropTypes.func,
+        eventList: EVENT_LIST_PROPS,
+        eventId: PropTypes.string,
+        instrumentTypes: PropTypes.string,
+        isInstrumentTypeFilterActive: PropTypes.bool,
+        onChange: PropTypes.func,
+        onClose: PropTypes.func,
+        apiHandledErrors: API_ERROR_HANDLING_PROPS,
+        onUpdateModalSubmit: PropTypes.func,
+        updatePaymentInstrument: PropTypes.func,
+        setVaultIdToDelete: PropTypes.func,
+        isUpdateIntrumentModalOpen: PropTypes.bool,
+        showUpdateInstrumentModal: PropTypes.func,
+        hideUpdateInstrumentModal: PropTypes.func,
+        isTryAgainModalOpen: PropTypes.bool,
+        hideTryAgainModal: PropTypes.func,
+        isInProgressDialogOpen: PropTypes.bool,
+        hideInProgressDialog: PropTypes.func,
+        canListPayoutUserInstruments: PropTypes.bool,
+    };
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            isDeletionAssociatedEventDialogShown: false,
+            isDeletionEmptyListDialogShown: false,
+            isDeletionAllowedDialogShown: false,
+            eventIds: [],
+            bankName: '',
+            filterValue: _.first(INSTRUMENT_TYPES_VALUE_DISPLAY).value,
+            modalUpdateTitle: '',
+            modalUpdateChildren: '',
+        };
+    }
+
+    componentDidUpdate = () => {
+        /* ... */
+    };
+
+    _handlePageChange = page => {
+        /* ... */
+    };
+
+    _getAccountSettingsItems = userInstruments => {
+        /* ... */
+    };
+
+    _getModalUpdateContent = ({ payeeEmail, instrumentType }, vaultId) => {
+        /* ... */
+    };
+
+    _handleItemAction = (vaultId, instrument, instrumentTitle, action) => {
+        /* ... */
+    };
+
+    _handleDialogError = () => {
+        /* ... */
+    };
+
+    _handleFilter = (value, index) => {
+        /* ... */
+    };
+
+    _handleClose = () => {
+        /* ... */
+    };
+
+    _handleClickUpdatePaymentInstrument = () => {
+        /* ... */
+    };
+
+    _handleViewEventsOnDeletion = () => {
+        /* ... */
+    };
+
+    _handleDeletion = () => {
+        /* ... */
+    };
+
+    render = () => {
+        const {
+            eventList = [],
+            hideEventsModal,
+            showEventsModal,
+            isInstrumentTypeFilterActive = false,
+            apiHandledErrors = null,
+            getEvents,
+            isEventsModalOpen = false,
+            paymentInstruments: {
+                userInstruments,
+                pagination: {
+                    pageCount = PAYMENT_INSTRUMENT_PAGINATION.PAGE_SIZE,
+                    pageNumber = PAYMENT_INSTRUMENT_PAGINATION.DEFAULT_PAGE,
+                } = {},
+            } = {},
+            isUpdateIntrumentModalOpen,
+            hideUpdateInstrumentModal,
+            isInProgressDialogOpen,
+            hideInProgressDialog,
+            canListPayoutUserInstruments,
+        } = this.props;
+
+        const {
+            isDeletionAssociatedEventDialogShown,
+            isDeletionEmptyListDialogShown,
+            isDeletionAllowedDialogShown,
+            modalUpdateTitle,
+            modalUpdateChildren,
+        } = this.state;
+
+        const paymentInstrumentsItems = this._getAccountSettingsItems(
+            userInstruments,
+        );
+        let emptyState = null;
+        let bottomText = null;
+        let pagination = null;
+        let filterPrimaryText = null;
+        let filter = null;
+        let paymentInstrumentTable = null;
+        let eventsModal = null;
+        let errorDialog = null;
+        let paymentInstrumentModalsAndDialogs = null;
+        let filterValues = INSTRUMENT_TYPES_VALUE_DISPLAY;
+
+        if (!canListPayoutUserInstruments) {
+            filterValues = INSTRUMENT_TYPES_NON_EPP_VALUE_DISPLAY;
+        }
+        filter = (
+            <InstrumentFilter
+                onFilterChange={this._handleFilter}
+                filterValue={this.state.filterValue}
+                filterValues={filterValues}
+            />
+        );
+        paymentInstrumentTable = (
+            <PaymentInstrumentTable items={paymentInstrumentsItems} />
+        );
+        if (isEmpty(paymentInstrumentsItems)) {
+            if (isInstrumentTypeFilterActive) {
+                filterPrimaryText = gettext('Remove filter');
+            } else {
+                paymentInstrumentTable = null;
+            }
+            emptyState = (
+                <div className="eds-g-cell eds-g-cell-1-1 eds-l-mar-top-16 eds-align--center">
+                    <EmptyState
+                        graphicType={<BankGraphicSvg />}
+                        title={gettext('No payout methods')}
+                        primaryText={filterPrimaryText}
+                        onPrimaryAction={this._handleFilter}
+                    />
+                </div>
+            );
+        } else {
+            pagination = (
+                <div className="eds-g-cell eds-g-cell-1-1 eds-align--center">
+                    <Pagination
+                        pageNumber={pageNumber}
+                        pageCount={pageCount}
+                        size="small"
+                        showOnSinglePage={false}
+                        onSelected={this._handlePageChange.bind(this)}
+                    />
+                </div>
+            );
+            bottomText = (
+                <div className="eds-g-cell eds-align--left eds-text-bm eds-l-mar-top-4">
+                    {EMPTY_STATE_MESSAGE}
+                </div>
+            );
+            if (isEventsModalOpen) {
+                eventsModal = (
+                    <EventsModal
+                        eventIds={this.state.eventIds}
+                        bankName={this.state.bankName}
+                        isShown={isEventsModalOpen}
+                        showEventsModal={showEventsModal}
+                        hideEventsModal={hideEventsModal}
+                        getEvents={getEvents}
+                        eventList={eventList}
+                    />
+                );
+            }
+            if (!isEmpty(apiHandledErrors)) {
+                errorDialog = (
+                    <Dialog
+                        isShown={isDeletionEmptyListDialogShown}
+                        message={apiHandledErrors.errors._error}
+                        title={DELETION_API_ERROR_ASSOCIATED.title}
+                        onClose={this._handleClose}
+                        onPrimaryAction={this._handleClose}
+                        primaryText={DELETION_API_ERROR_ASSOCIATED.primaryText}
+                        primaryType="link"
+                        onClickOutside={this._handleClose}
+                    />
+                );
+            }
+        }
+        paymentInstrumentModalsAndDialogs = (
+            <div>
+                <Dialog
+                    isShown={isDeletionAllowedDialogShown}
+                    message={DELETION_ALLOWED.message}
+                    title={DELETION_ALLOWED.title}
+                    onClose={this._handleClose}
+                    onSecondaryAction={this._handleClose}
+                    secondaryText={DELETION_ALLOWED.secondaryText}
+                    secondaryType="link"
+                    onPrimaryAction={this._handleDeletion}
+                    primaryText={DELETION_ALLOWED.primaryText}
+                    primaryType="link"
+                    onClickOutside={this._handleClose}
+                />
+                <Dialog
+                    isShown={isDeletionAssociatedEventDialogShown}
+                    message={DELETION_EVENT_ASSOCIATED.message}
+                    title={DELETION_EVENT_ASSOCIATED.title}
+                    onClose={this._handleClose}
+                    onSecondaryAction={this._handleViewEventsOnDeletion}
+                    secondaryText={DELETION_EVENT_ASSOCIATED.secondaryText}
+                    secondaryType="link"
+                    onPrimaryAction={this._handleClose}
+                    primaryText={DELETION_EVENT_ASSOCIATED.primaryText}
+                    primaryType="link"
+                    onClickOutside={this._handleClose}
+                />
+                <Modal
+                    isShown={isUpdateIntrumentModalOpen}
+                    children={modalUpdateChildren}
+                    title={modalUpdateTitle}
+                    onClose={hideUpdateInstrumentModal}
+                    onSecondaryAction={hideUpdateInstrumentModal}
+                    secondaryText={
+                        UPDATE_PAYMENT_INSTRUMENT_MODAL.secondaryText
+                    }
+                    secondaryType="neutral"
+                    onPrimaryAction={this._handleClickUpdatePaymentInstrument}
+                    primaryText={UPDATE_PAYMENT_INSTRUMENT_MODAL.primaryText}
+                    primaryType="fill"
+                    onClickOutside={hideUpdateInstrumentModal}
+                />
+                <InProgressDialog
+                    isInProgressDialogOpen={isInProgressDialogOpen}
+                    hideInProgressDialog={hideInProgressDialog}
+                />
+                {eventsModal}
+                {errorDialog}
+            </div>
+        );
+
+        return (
+            <div>
+                {paymentInstrumentModalsAndDialogs}
+                {filter}
+                <div className="eds-g-cell eds-g-cell-1-1 eds-align--left eds-l-mar-top-4">
+                    {paymentInstrumentTable}
+                    {emptyState}
+                    {pagination}
+                </div>
+                {bottomText}
+            </div>
+        );
+    };
+}
diff --git a/refactors/logic-and-jsx/1-NoDestructuring.js b/refactors/logic-and-jsx/1-NoDestructuring.js
new file mode 100644
index 0000000..d3f929b
--- /dev/null
+++ b/refactors/logic-and-jsx/1-NoDestructuring.js
@@ -0,0 +1,332 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
+import isEmpty from 'lodash/isEmpty';
+import gettext from 'js-utils/gettext';
+
+import BankGraphicSvg from 'eventbrite_design_system/iconography/icons/BankGraphic';
+import DataTable from 'eventbrite_design_system/dataTable/DataTable';
+import Dialog from 'eventbrite_design_system/dialog/Dialog';
+import EmptyState from 'eventbrite_design_system/emptyState/EmptyState';
+import Modal from 'eventbrite_design_system/modal/Modal';
+import Pagination from 'eventbrite_design_system/pagination/Pagination';
+import SelectField from 'eventbrite_design_system/inputField/SelectField';
+
+import * as Constants from '../constants';
+import * as FinancialProfileConstants from '../constants/financialProfile';
+import * as AppPropTypes from '../constants/proptypes';
+
+import EventsModal from './EventsModal';
+import { itemPaymentInstrument } from './financialProfileUtils/PaymentInstrument';
+import PaypalForm from './financialProfileUtils/PaypalForm';
+import AuthnetForm from './financialProfileUtils/AuthnetForm';
+import InProgressDialog from './financialProfileUtils/InProgressDialog';
+
+function getPaginationSettings(res) {
+    let pageCount =
+        FinancialProfileConstants.PAYMENT_INSTRUMENT_PAGINATION.PAGE_SIZE;
+    let pageNumber =
+        FinancialProfileConstants.PAYMENT_INSTRUMENT_PAGINATION.DEFAULT_PAGE;
+
+    if (res && res.pagination) {
+        if (typeof res.pagination.pageCount !== 'undefined') {
+            pageCount = res.pagination.pageCount;
+        }
+        if (typeof res.pagination.pageNumber !== 'undefined') {
+            pageNumber = res.pagination.pageNumber;
+        }
+    }
+
+    return { pageCount, pageNumber };
+}
+
+function InstrumentFilter(props) {
+    return (
+        <div className="eds-g-cell eds-g-cell-3-12 eds-align--left eds-l-mar-top-10">
+            <SelectField
+                onChange={props.onFilterChange}
+                name="instrumentTypes"
+                label={FinancialProfileConstants.VIEW_TYPE_LABEL}
+                values={props.filterValues}
+                value={props.filterValue}
+            />
+        </div>
+    );
+}
+
+function PaymentInstrumentTable(props) {
+    return (
+        <div className="eds-g-cell eds-g-cell-1-1">
+            <DataTable
+                items={props.items}
+                columns={Constants.ACCOUNT_SETTINGS_LIST_COLUMNS}
+            />
+        </div>
+    );
+}
+
+export default class PayoutMethodSummary extends PureComponent {
+    static propTypes = {
+        handlePageChange: PropTypes.func,
+        handleDeleteInstrument: PropTypes.func,
+        paymentInstruments: AppPropTypes.PAYMENT_INSTRUMENTS_LIST_PROPS,
+        isEventsModalOpen: PropTypes.bool,
+        showEventsModal: PropTypes.func,
+        hideEventsModal: PropTypes.func,
+        getEvents: PropTypes.func,
+        eventList: AppPropTypes.EVENT_LIST_PROPS,
+        eventId: PropTypes.string,
+        instrumentTypes: PropTypes.string,
+        isInstrumentTypeFilterActive: PropTypes.bool,
+        onChange: PropTypes.func,
+        onClose: PropTypes.func,
+        apiHandledErrors: AppPropTypes.API_ERROR_HANDLING_PROPS,
+        onUpdateModalSubmit: PropTypes.func,
+        updatePaymentInstrument: PropTypes.func,
+        setVaultIdToDelete: PropTypes.func,
+        isUpdateIntrumentModalOpen: PropTypes.bool,
+        showUpdateInstrumentModal: PropTypes.func,
+        hideUpdateInstrumentModal: PropTypes.func,
+        isTryAgainModalOpen: PropTypes.bool,
+        hideTryAgainModal: PropTypes.func,
+        isInProgressDialogOpen: PropTypes.bool,
+        hideInProgressDialog: PropTypes.func,
+        canListPayoutUserInstruments: PropTypes.bool,
+    };
+
+    static defaultProps = {
+        eventList: [],
+        isInstrumentTypeFilterActive: false,
+        apiHandledErrors: null,
+        isEventsModalOpen: false,
+    };
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            isDeletionAssociatedEventDialogShown: false,
+            isDeletionEmptyListDialogShown: false,
+            isDeletionAllowedDialogShown: false,
+            eventIds: [],
+            bankName: '',
+            filterValue: _.first(
+                FinancialProfileConstants.INSTRUMENT_TYPES_VALUE_DISPLAY,
+            ).value,
+            modalUpdateTitle: '',
+            modalUpdateChildren: '',
+        };
+    }
+
+    componentDidUpdate = () => {
+        /* ... */
+    };
+
+    _handlePageChange = page => {
+        /* ... */
+    };
+
+    _getAccountSettingsItems = userInstruments => {
+        /* ... */
+    };
+
+    _getModalUpdateContent = ({ payeeEmail, instrumentType }, vaultId) => {
+        /* ... */
+    };
+
+    _handleItemAction = (vaultId, instrument, instrumentTitle, action) => {
+        /* ... */
+    };
+
+    _handleDialogError = () => {
+        /* ... */
+    };
+
+    _handleFilter = (value, index) => {
+        /* ... */
+    };
+
+    _handleClose = () => {
+        /* ... */
+    };
+
+    _handleClickUpdatePaymentInstrument = () => {
+        /* ... */
+    };
+
+    _handleViewEventsOnDeletion = () => {
+        /* ... */
+    };
+
+    _handleDeletion = () => {
+        /* ... */
+    };
+
+    render = () => {
+        let paginationSettings = getPaginationSettings(
+            this.props.paymentInstruments,
+        );
+
+        let paymentInstrumentsItems = this._getAccountSettingsItems(
+            this.props.paymentInstruments.userInstruments,
+        );
+        let emptyState = null;
+        let bottomText = null;
+        let pagination = null;
+        let filterPrimaryText = null;
+        let filter = null;
+        let paymentInstrumentTable = null;
+        let eventsModal = null;
+        let errorDialog = null;
+        let paymentInstrumentModalsAndDialogs = null;
+        let filterValues =
+            FinancialProfileConstants.INSTRUMENT_TYPES_VALUE_DISPLAY;
+
+        if (!this.props.canListPayoutUserInstruments) {
+            filterValues =
+                FinancialProfileConstants.INSTRUMENT_TYPES_NON_EPP_VALUE_DISPLAY;
+        }
+        filter = (
+            <InstrumentFilter
+                onFilterChange={this._handleFilter}
+                filterValue={this.state.filterValue}
+                filterValues={filterValues}
+            />
+        );
+        paymentInstrumentTable = (
+            <PaymentInstrumentTable items={paymentInstrumentsItems} />
+        );
+        if (isEmpty(paymentInstrumentsItems)) {
+            if (this.props.isInstrumentTypeFilterActive) {
+                filterPrimaryText = gettext('Remove filter');
+            } else {
+                paymentInstrumentTable = null;
+            }
+            emptyState = (
+                <div className="eds-g-cell eds-g-cell-1-1 eds-l-mar-top-16 eds-align--center">
+                    <EmptyState
+                        graphicType={<BankGraphicSvg />}
+                        title={gettext('No payout methods')}
+                        primaryText={filterPrimaryText}
+                        onPrimaryAction={this._handleFilter}
+                    />
+                </div>
+            );
+        } else {
+            pagination = (
+                <div className="eds-g-cell eds-g-cell-1-1 eds-align--center">
+                    <Pagination
+                        pageNumber={paginationSettings.pageNumber}
+                        pageCount={paginationSettings.pageCount}
+                        size="small"
+                        showOnSinglePage={false}
+                        onSelected={this._handlePageChange.bind(this)}
+                    />
+                </div>
+            );
+            bottomText = (
+                <div className="eds-g-cell eds-align--left eds-text-bm eds-l-mar-top-4">
+                    {FinancialProfileConstants.EMPTY_STATE_MESSAGE}
+                </div>
+            );
+            if (this.props.isEventsModalOpen) {
+                eventsModal = (
+                    <EventsModal
+                        eventIds={this.state.eventIds}
+                        bankName={this.state.bankName}
+                        isShown={this.props.isEventsModalOpen}
+                        showEventsModal={this.props.showEventsModal}
+                        hideEventsModal={this.props.hideEventsModal}
+                        getEvents={this.props.getEvents}
+                        eventList={this.props.eventList}
+                    />
+                );
+            }
+            if (!isEmpty(this.props.apiHandledErrors)) {
+                errorDialog = (
+                    <Dialog
+                        isShown={this.state.isDeletionEmptyListDialogShown}
+                        message={this.props.apiHandledErrors.errors._error}
+                        title={Constants.DELETION_API_ERROR_ASSOCIATED.title}
+                        onClose={this._handleClose}
+                        onPrimaryAction={this._handleClose}
+                        primaryText={
+                            Constants.DELETION_API_ERROR_ASSOCIATED.primaryText
+                        }
+                        primaryType="link"
+                        onClickOutside={this._handleClose}
+                    />
+                );
+            }
+        }
+        paymentInstrumentModalsAndDialogs = (
+            <div>
+                <Dialog
+                    isShown={this.state.isDeletionAllowedDialogShown}
+                    message={Constants.DELETION_ALLOWED.message}
+                    title={Constants.DELETION_ALLOWED.title}
+                    onClose={this._handleClose}
+                    onSecondaryAction={this._handleClose}
+                    secondaryText={Constants.DELETION_ALLOWED.secondaryText}
+                    secondaryType="link"
+                    onPrimaryAction={this._handleDeletion}
+                    primaryText={Constants.DELETION_ALLOWED.primaryText}
+                    primaryType="link"
+                    onClickOutside={this._handleClose}
+                />
+                <Dialog
+                    isShown={this.state.isDeletionAssociatedEventDialogShown}
+                    message={Constants.DELETION_EVENT_ASSOCIATED.message}
+                    title={Constants.DELETION_EVENT_ASSOCIATED.title}
+                    onClose={this._handleClose}
+                    onSecondaryAction={this._handleViewEventsOnDeletion}
+                    secondaryText={
+                        Constants.DELETION_EVENT_ASSOCIATED.secondaryText
+                    }
+                    secondaryType="link"
+                    onPrimaryAction={this._handleClose}
+                    primaryText={
+                        Constants.DELETION_EVENT_ASSOCIATED.primaryText
+                    }
+                    primaryType="link"
+                    onClickOutside={this._handleClose}
+                />
+                <Modal
+                    isShown={this.props.isUpdateIntrumentModalOpen}
+                    children={this.state.modalUpdateChildren}
+                    title={this.state.modalUpdateTitle}
+                    onClose={this.props.hideUpdateInstrumentModal}
+                    onSecondaryAction={this.props.hideUpdateInstrumentModal}
+                    secondaryText={
+                        Constants.UPDATE_PAYMENT_INSTRUMENT_MODAL.secondaryText
+                    }
+                    secondaryType="neutral"
+                    onPrimaryAction={this._handleClickUpdatePaymentInstrument}
+                    primaryText={
+                        Constants.UPDATE_PAYMENT_INSTRUMENT_MODAL.primaryText
+                    }
+                    primaryType="fill"
+                    onClickOutside={this.props.hideUpdateInstrumentModal}
+                />
+                <InProgressDialog
+                    isInProgressDialogOpen={this.props.isInProgressDialogOpen}
+                    hideInProgressDialog={this.props.hideInProgressDialog}
+                />
+                {eventsModal}
+                {errorDialog}
+            </div>
+        );
+
+        return (
+            <div>
+                {paymentInstrumentModalsAndDialogs}
+                {filter}
+                <div className="eds-g-cell eds-g-cell-1-1 eds-align--left eds-l-mar-top-4">
+                    {paymentInstrumentTable}
+                    {emptyState}
+                    {pagination}
+                </div>
+                {bottomText}
+            </div>
+        );
+    };
+}
diff --git a/refactors/logic-and-jsx/2-SplitConditionals.js b/refactors/logic-and-jsx/2-SplitConditionals.js
new file mode 100644
index 0000000..004031a
--- /dev/null
+++ b/refactors/logic-and-jsx/2-SplitConditionals.js
@@ -0,0 +1,381 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
+import isEmpty from 'lodash/isEmpty';
+import gettext from 'js-utils/gettext';
+
+import BankGraphicSvg from 'eventbrite_design_system/iconography/icons/BankGraphic';
+import DataTable from 'eventbrite_design_system/dataTable/DataTable';
+import Dialog from 'eventbrite_design_system/dialog/Dialog';
+import EmptyState from 'eventbrite_design_system/emptyState/EmptyState';
+import Modal from 'eventbrite_design_system/modal/Modal';
+import Pagination from 'eventbrite_design_system/pagination/Pagination';
+import SelectField from 'eventbrite_design_system/inputField/SelectField';
+
+import * as Constants from '../constants';
+import * as FinancialProfileConstants from '../constants/financialProfile';
+import * as AppPropTypes from '../constants/proptypes';
+
+import EventsModal from './EventsModal';
+import { itemPaymentInstrument } from './financialProfileUtils/PaymentInstrument';
+import PaypalForm from './financialProfileUtils/PaypalForm';
+import AuthnetForm from './financialProfileUtils/AuthnetForm';
+import InProgressDialog from './financialProfileUtils/InProgressDialog';
+
+function getPaginationSettings(res) {
+    let pageCount =
+        FinancialProfileConstants.PAYMENT_INSTRUMENT_PAGINATION.PAGE_SIZE;
+    let pageNumber =
+        FinancialProfileConstants.PAYMENT_INSTRUMENT_PAGINATION.DEFAULT_PAGE;
+
+    if (res && res.pagination) {
+        if (typeof res.pagination.pageCount !== 'undefined') {
+            pageCount = res.pagination.pageCount;
+        }
+        if (typeof res.pagination.pageNumber !== 'undefined') {
+            pageNumber = res.pagination.pageNumber;
+        }
+    }
+
+    return { pageCount, pageNumber };
+}
+
+function InstrumentFilter(props) {
+    return (
+        <div className="eds-g-cell eds-g-cell-3-12 eds-align--left eds-l-mar-top-10">
+            <SelectField
+                onChange={props.onFilterChange}
+                name="instrumentTypes"
+                label={FinancialProfileConstants.VIEW_TYPE_LABEL}
+                values={props.filterValues}
+                value={props.filterValue}
+            />
+        </div>
+    );
+}
+
+function PaymentInstrumentTable(props) {
+    return (
+        <div className="eds-g-cell eds-g-cell-1-1">
+            <DataTable
+                items={props.items}
+                columns={Constants.ACCOUNT_SETTINGS_LIST_COLUMNS}
+            />
+        </div>
+    );
+}
+
+export default class PayoutMethodSummary extends PureComponent {
+    static propTypes = {
+        handlePageChange: PropTypes.func,
+        handleDeleteInstrument: PropTypes.func,
+        paymentInstruments: AppPropTypes.PAYMENT_INSTRUMENTS_LIST_PROPS,
+        isEventsModalOpen: PropTypes.bool,
+        showEventsModal: PropTypes.func,
+        hideEventsModal: PropTypes.func,
+        getEvents: PropTypes.func,
+        eventList: AppPropTypes.EVENT_LIST_PROPS,
+        eventId: PropTypes.string,
+        instrumentTypes: PropTypes.string,
+        isInstrumentTypeFilterActive: PropTypes.bool,
+        onChange: PropTypes.func,
+        onClose: PropTypes.func,
+        apiHandledErrors: AppPropTypes.API_ERROR_HANDLING_PROPS,
+        onUpdateModalSubmit: PropTypes.func,
+        updatePaymentInstrument: PropTypes.func,
+        setVaultIdToDelete: PropTypes.func,
+        isUpdateIntrumentModalOpen: PropTypes.bool,
+        showUpdateInstrumentModal: PropTypes.func,
+        hideUpdateInstrumentModal: PropTypes.func,
+        isTryAgainModalOpen: PropTypes.bool,
+        hideTryAgainModal: PropTypes.func,
+        isInProgressDialogOpen: PropTypes.bool,
+        hideInProgressDialog: PropTypes.func,
+        canListPayoutUserInstruments: PropTypes.bool,
+    };
+
+    static defaultProps = {
+        eventList: [],
+        isInstrumentTypeFilterActive: false,
+        apiHandledErrors: null,
+        isEventsModalOpen: false,
+    };
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            isDeletionAssociatedEventDialogShown: false,
+            isDeletionEmptyListDialogShown: false,
+            isDeletionAllowedDialogShown: false,
+            eventIds: [],
+            bankName: '',
+            filterValue: _.first(
+                FinancialProfileConstants.INSTRUMENT_TYPES_VALUE_DISPLAY,
+            ).value,
+            modalUpdateTitle: '',
+            modalUpdateChildren: '',
+        };
+    }
+
+    componentDidUpdate = () => {
+        /* ... */
+    };
+
+    _handlePageChange = page => {
+        /* ... */
+    };
+
+    _getAccountSettingsItems = userInstruments => {
+        /* ... */
+    };
+
+    _getModalUpdateContent = ({ payeeEmail, instrumentType }, vaultId) => {
+        /* ... */
+    };
+
+    _handleItemAction = (vaultId, instrument, instrumentTitle, action) => {
+        /* ... */
+    };
+
+    _handleDialogError = () => {
+        /* ... */
+    };
+
+    _handleFilter = (value, index) => {
+        /* ... */
+    };
+
+    _handleClose = () => {
+        /* ... */
+    };
+
+    _handleClickUpdatePaymentInstrument = () => {
+        /* ... */
+    };
+
+    _handleViewEventsOnDeletion = () => {
+        /* ... */
+    };
+
+    _handleDeletion = () => {
+        /* ... */
+    };
+
+    render = () => {
+        let paginationSettings = getPaginationSettings(
+            this.props.paymentInstruments,
+        );
+
+        let paymentInstrumentsItems = this._getAccountSettingsItems(
+            this.props.paymentInstruments.userInstruments,
+        );
+
+        // --------------------------------------------------------------------
+
+        let filterPrimaryText = null;
+
+        if (
+            isEmpty(paymentInstrumentsItems) &&
+            this.props.isInstrumentTypeFilterActive
+        ) {
+            filterPrimaryText = gettext('Remove filter');
+        }
+
+        // --------------------------------------------------------------------
+
+        let emptyState = null;
+
+        if (isEmpty(paymentInstrumentsItems)) {
+            emptyState = (
+                <div className="eds-g-cell eds-g-cell-1-1 eds-l-mar-top-16 eds-align--center">
+                    <EmptyState
+                        graphicType={<BankGraphicSvg />}
+                        title={gettext('No payout methods')}
+                        primaryText={filterPrimaryText}
+                        onPrimaryAction={this._handleFilter}
+                    />
+                </div>
+            );
+        }
+
+        // --------------------------------------------------------------------
+
+        let bottomText = null;
+
+        if (!isEmpty(paymentInstrumentsItems)) {
+            bottomText = (
+                <div className="eds-g-cell eds-align--left eds-text-bm eds-l-mar-top-4">
+                    {FinancialProfileConstants.EMPTY_STATE_MESSAGE}
+                </div>
+            );
+        }
+
+        // --------------------------------------------------------------------
+
+        let pagination = null;
+
+        if (!isEmpty(paymentInstrumentsItems)) {
+            pagination = (
+                <div className="eds-g-cell eds-g-cell-1-1 eds-align--center">
+                    <Pagination
+                        pageNumber={paginationSettings.pageNumber}
+                        pageCount={paginationSettings.pageCount}
+                        size="small"
+                        showOnSinglePage={false}
+                        onSelected={this._handlePageChange.bind(this)}
+                    />
+                </div>
+            );
+        }
+
+        // --------------------------------------------------------------------
+
+        let filterValues =
+            FinancialProfileConstants.INSTRUMENT_TYPES_VALUE_DISPLAY;
+
+        if (!this.props.canListPayoutUserInstruments) {
+            filterValues =
+                FinancialProfileConstants.INSTRUMENT_TYPES_NON_EPP_VALUE_DISPLAY;
+        }
+
+        // --------------------------------------------------------------------
+
+        let filter = (
+            <InstrumentFilter
+                onFilterChange={this._handleFilter}
+                filterValue={this.state.filterValue}
+                filterValues={filterValues}
+            />
+        );
+
+        // --------------------------------------------------------------------
+
+        let paymentInstrumentTable = null;
+
+        if (
+            !isEmpty(paymentInstrumentsItems) ||
+            this.props.isInstrumentTypeFilterActive
+        ) {
+            paymentInstrumentTable = (
+                <PaymentInstrumentTable items={paymentInstrumentsItems} />
+            );
+        }
+
+        // --------------------------------------------------------------------
+
+        let eventsModal = null;
+
+        if (!isEmpty(paymentInstrumentsItems) && this.props.isEventsModalOpen) {
+            eventsModal = (
+                <EventsModal
+                    eventIds={this.state.eventIds}
+                    bankName={this.state.bankName}
+                    isShown={this.props.isEventsModalOpen}
+                    showEventsModal={this.props.showEventsModal}
+                    hideEventsModal={this.props.hideEventsModal}
+                    getEvents={this.props.getEvents}
+                    eventList={this.props.eventList}
+                />
+            );
+        }
+
+        // --------------------------------------------------------------------
+
+        let errorDialog = null;
+
+        if (
+            !isEmpty(paymentInstrumentsItems) &&
+            !isEmpty(this.props.apiHandledErrors)
+        ) {
+            errorDialog = (
+                <Dialog
+                    isShown={this.state.isDeletionEmptyListDialogShown}
+                    message={this.props.apiHandledErrors.errors._error}
+                    title={Constants.DELETION_API_ERROR_ASSOCIATED.title}
+                    onClose={this._handleClose}
+                    onPrimaryAction={this._handleClose}
+                    primaryText={
+                        Constants.DELETION_API_ERROR_ASSOCIATED.primaryText
+                    }
+                    primaryType="link"
+                    onClickOutside={this._handleClose}
+                />
+            );
+        }
+
+        // --------------------------------------------------------------------
+
+        let paymentInstrumentModalsAndDialogs = (
+            <div>
+                <Dialog
+                    isShown={this.state.isDeletionAllowedDialogShown}
+                    message={Constants.DELETION_ALLOWED.message}
+                    title={Constants.DELETION_ALLOWED.title}
+                    onClose={this._handleClose}
+                    onSecondaryAction={this._handleClose}
+                    secondaryText={Constants.DELETION_ALLOWED.secondaryText}
+                    secondaryType="link"
+                    onPrimaryAction={this._handleDeletion}
+                    primaryText={Constants.DELETION_ALLOWED.primaryText}
+                    primaryType="link"
+                    onClickOutside={this._handleClose}
+                />
+                <Dialog
+                    isShown={this.state.isDeletionAssociatedEventDialogShown}
+                    message={Constants.DELETION_EVENT_ASSOCIATED.message}
+                    title={Constants.DELETION_EVENT_ASSOCIATED.title}
+                    onClose={this._handleClose}
+                    onSecondaryAction={this._handleViewEventsOnDeletion}
+                    secondaryText={
+                        Constants.DELETION_EVENT_ASSOCIATED.secondaryText
+                    }
+                    secondaryType="link"
+                    onPrimaryAction={this._handleClose}
+                    primaryText={
+                        Constants.DELETION_EVENT_ASSOCIATED.primaryText
+                    }
+                    primaryType="link"
+                    onClickOutside={this._handleClose}
+                />
+                <Modal
+                    isShown={this.props.isUpdateIntrumentModalOpen}
+                    children={this.state.modalUpdateChildren}
+                    title={this.state.modalUpdateTitle}
+                    onClose={this.props.hideUpdateInstrumentModal}
+                    onSecondaryAction={this.props.hideUpdateInstrumentModal}
+                    secondaryText={
+                        Constants.UPDATE_PAYMENT_INSTRUMENT_MODAL.secondaryText
+                    }
+                    secondaryType="neutral"
+                    onPrimaryAction={this._handleClickUpdatePaymentInstrument}
+                    primaryText={
+                        Constants.UPDATE_PAYMENT_INSTRUMENT_MODAL.primaryText
+                    }
+                    primaryType="fill"
+                    onClickOutside={this.props.hideUpdateInstrumentModal}
+                />
+                <InProgressDialog
+                    isInProgressDialogOpen={this.props.isInProgressDialogOpen}
+                    hideInProgressDialog={this.props.hideInProgressDialog}
+                />
+                {eventsModal}
+                {errorDialog}
+            </div>
+        );
+
+        // --------------------------------------------------------------------
+
+        return (
+            <div>
+                {paymentInstrumentModalsAndDialogs}
+                {filter}
+                <div className="eds-g-cell eds-g-cell-1-1 eds-align--left eds-l-mar-top-4">
+                    {paymentInstrumentTable}
+                    {emptyState}
+                    {pagination}
+                </div>
+                {bottomText}
+            </div>
+        );
+    };
+}
diff --git a/refactors/logic-and-jsx/3-InlineLogic.js b/refactors/logic-and-jsx/3-InlineLogic.js
new file mode 100644
index 0000000..d6c0f9e
--- /dev/null
+++ b/refactors/logic-and-jsx/3-InlineLogic.js
@@ -0,0 +1,307 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
+import isEmpty from 'lodash/isEmpty';
+import gettext from 'js-utils/gettext';
+
+import BankGraphicSvg from 'eventbrite_design_system/iconography/icons/BankGraphic';
+import DataTable from 'eventbrite_design_system/dataTable/DataTable';
+import Dialog from 'eventbrite_design_system/dialog/Dialog';
+import EmptyState from 'eventbrite_design_system/emptyState/EmptyState';
+import Modal from 'eventbrite_design_system/modal/Modal';
+import Pagination from 'eventbrite_design_system/pagination/Pagination';
+import SelectField from 'eventbrite_design_system/inputField/SelectField';
+
+import * as Constants from '../constants';
+import * as FinancialProfileConstants from '../constants/financialProfile';
+import * as AppPropTypes from '../constants/proptypes';
+
+import EventsModal from './EventsModal';
+import { itemPaymentInstrument } from './financialProfileUtils/PaymentInstrument';
+import PaypalForm from './financialProfileUtils/PaypalForm';
+import AuthnetForm from './financialProfileUtils/AuthnetForm';
+import InProgressDialog from './financialProfileUtils/InProgressDialog';
+
+function getPaginationSettings(res) {
+    let pageCount =
+        FinancialProfileConstants.PAYMENT_INSTRUMENT_PAGINATION.PAGE_SIZE;
+    let pageNumber =
+        FinancialProfileConstants.PAYMENT_INSTRUMENT_PAGINATION.DEFAULT_PAGE;
+
+    if (res && res.pagination) {
+        if (typeof res.pagination.pageCount !== 'undefined') {
+            pageCount = res.pagination.pageCount;
+        }
+        if (typeof res.pagination.pageNumber !== 'undefined') {
+            pageNumber = res.pagination.pageNumber;
+        }
+    }
+
+    return { pageCount, pageNumber };
+}
+
+function InstrumentFilter(props) {
+    return (
+        <div className="eds-g-cell eds-g-cell-3-12 eds-align--left eds-l-mar-top-10">
+            <SelectField
+                onChange={props.onFilterChange}
+                name="instrumentTypes"
+                label={FinancialProfileConstants.VIEW_TYPE_LABEL}
+                values={props.filterValues}
+                value={props.filterValue}
+            />
+        </div>
+    );
+}
+
+function PaymentInstrumentTable(props) {
+    return (
+        <div className="eds-g-cell eds-g-cell-1-1">
+            <DataTable
+                items={props.items}
+                columns={Constants.ACCOUNT_SETTINGS_LIST_COLUMNS}
+            />
+        </div>
+    );
+}
+
+export default class PayoutMethodSummary extends PureComponent {
+    static propTypes = {
+        handlePageChange: PropTypes.func,
+        handleDeleteInstrument: PropTypes.func,
+        paymentInstruments: AppPropTypes.PAYMENT_INSTRUMENTS_LIST_PROPS,
+        isEventsModalOpen: PropTypes.bool,
+        showEventsModal: PropTypes.func,
+        hideEventsModal: PropTypes.func,
+        getEvents: PropTypes.func,
+        eventList: AppPropTypes.EVENT_LIST_PROPS,
+        eventId: PropTypes.string,
+        instrumentTypes: PropTypes.string,
+        isInstrumentTypeFilterActive: PropTypes.bool,
+        onChange: PropTypes.func,
+        onClose: PropTypes.func,
+        apiHandledErrors: AppPropTypes.API_ERROR_HANDLING_PROPS,
+        onUpdateModalSubmit: PropTypes.func,
+        updatePaymentInstrument: PropTypes.func,
+        setVaultIdToDelete: PropTypes.func,
+        isUpdateIntrumentModalOpen: PropTypes.bool,
+        showUpdateInstrumentModal: PropTypes.func,
+        hideUpdateInstrumentModal: PropTypes.func,
+        isTryAgainModalOpen: PropTypes.bool,
+        hideTryAgainModal: PropTypes.func,
+        isInProgressDialogOpen: PropTypes.bool,
+        hideInProgressDialog: PropTypes.func,
+        canListPayoutUserInstruments: PropTypes.bool,
+    };
+
+    static defaultProps = {
+        eventList: [],
+        isInstrumentTypeFilterActive: false,
+        apiHandledErrors: null,
+        isEventsModalOpen: false,
+    };
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            isDeletionAssociatedEventDialogShown: false,
+            isDeletionEmptyListDialogShown: false,
+            isDeletionAllowedDialogShown: false,
+            eventIds: [],
+            bankName: '',
+            filterValue: _.first(
+                FinancialProfileConstants.INSTRUMENT_TYPES_VALUE_DISPLAY,
+            ).value,
+            modalUpdateTitle: '',
+            modalUpdateChildren: '',
+        };
+    }
+
+    componentDidUpdate = () => {
+        /* ... */
+    };
+
+    _handlePageChange = page => {
+        /* ... */
+    };
+
+    _getAccountSettingsItems = userInstruments => {
+        /* ... */
+    };
+
+    _getModalUpdateContent = ({ payeeEmail, instrumentType }, vaultId) => {
+        /* ... */
+    };
+
+    _handleItemAction = (vaultId, instrument, instrumentTitle, action) => {
+        /* ... */
+    };
+
+    _handleDialogError = () => {
+        /* ... */
+    };
+
+    _handleFilter = (value, index) => {
+        /* ... */
+    };
+
+    _handleClose = () => {
+        /* ... */
+    };
+
+    _handleClickUpdatePaymentInstrument = () => {
+        /* ... */
+    };
+
+    _handleViewEventsOnDeletion = () => {
+        /* ... */
+    };
+
+    _handleDeletion = () => {
+        /* ... */
+    };
+
+    render = () => {
+        let paginationSettings = getPaginationSettings(
+            this.props.paymentInstruments,
+        );
+
+        let paymentInstrumentsItems = this._getAccountSettingsItems(
+            this.props.paymentInstruments.userInstruments,
+        );
+
+        return (
+            <div>
+                <Dialog
+                    isShown={this.state.isDeletionAllowedDialogShown}
+                    message={Constants.DELETION_ALLOWED.message}
+                    title={Constants.DELETION_ALLOWED.title}
+                    onClose={this._handleClose}
+                    onSecondaryAction={this._handleClose}
+                    secondaryText={Constants.DELETION_ALLOWED.secondaryText}
+                    secondaryType="link"
+                    onPrimaryAction={this._handleDeletion}
+                    primaryText={Constants.DELETION_ALLOWED.primaryText}
+                    primaryType="link"
+                    onClickOutside={this._handleClose}
+                />
+                <Dialog
+                    isShown={this.state.isDeletionAssociatedEventDialogShown}
+                    message={Constants.DELETION_EVENT_ASSOCIATED.message}
+                    title={Constants.DELETION_EVENT_ASSOCIATED.title}
+                    onClose={this._handleClose}
+                    onSecondaryAction={this._handleViewEventsOnDeletion}
+                    secondaryText={
+                        Constants.DELETION_EVENT_ASSOCIATED.secondaryText
+                    }
+                    secondaryType="link"
+                    onPrimaryAction={this._handleClose}
+                    primaryText={
+                        Constants.DELETION_EVENT_ASSOCIATED.primaryText
+                    }
+                    primaryType="link"
+                    onClickOutside={this._handleClose}
+                />
+                <Modal
+                    isShown={this.props.isUpdateIntrumentModalOpen}
+                    children={this.state.modalUpdateChildren}
+                    title={this.state.modalUpdateTitle}
+                    onClose={this.props.hideUpdateInstrumentModal}
+                    onSecondaryAction={this.props.hideUpdateInstrumentModal}
+                    secondaryText={
+                        Constants.UPDATE_PAYMENT_INSTRUMENT_MODAL.secondaryText
+                    }
+                    secondaryType="neutral"
+                    onPrimaryAction={this._handleClickUpdatePaymentInstrument}
+                    primaryText={
+                        Constants.UPDATE_PAYMENT_INSTRUMENT_MODAL.primaryText
+                    }
+                    primaryType="fill"
+                    onClickOutside={this.props.hideUpdateInstrumentModal}
+                />
+                <InProgressDialog
+                    isInProgressDialogOpen={this.props.isInProgressDialogOpen}
+                    hideInProgressDialog={this.props.hideInProgressDialog}
+                />
+                {!isEmpty(paymentInstrumentsItems) &&
+                    this.props.isEventsModalOpen && (
+                        <EventsModal
+                            eventIds={this.state.eventIds}
+                            bankName={this.state.bankName}
+                            isShown={this.props.isEventsModalOpen}
+                            showEventsModal={this.props.showEventsModal}
+                            hideEventsModal={this.props.hideEventsModal}
+                            getEvents={this.props.getEvents}
+                            eventList={this.props.eventList}
+                        />
+                    )}
+                {!isEmpty(paymentInstrumentsItems) &&
+                    !isEmpty(this.props.apiHandledErrors) && (
+                        <Dialog
+                            isShown={this.state.isDeletionEmptyListDialogShown}
+                            message={this.props.apiHandledErrors.errors._error}
+                            title={
+                                Constants.DELETION_API_ERROR_ASSOCIATED.title
+                            }
+                            onClose={this._handleClose}
+                            onPrimaryAction={this._handleClose}
+                            primaryText={
+                                Constants.DELETION_API_ERROR_ASSOCIATED
+                                    .primaryText
+                            }
+                            primaryType="link"
+                            onClickOutside={this._handleClose}
+                        />
+                    )}
+                <InstrumentFilter
+                    onFilterChange={this._handleFilter}
+                    filterValue={this.state.filterValue}
+                    filterValues={
+                        this.props.canListPayoutUserInstruments
+                            ? FinancialProfileConstants.INSTRUMENT_TYPES_VALUE_DISPLAY
+                            : FinancialProfileConstants.INSTRUMENT_TYPES_NON_EPP_VALUE_DISPLAY
+                    }
+                />
+                <div className="eds-g-cell eds-g-cell-1-1 eds-align--left eds-l-mar-top-4">
+                    {(!isEmpty(paymentInstrumentsItems) ||
+                        this.props.isInstrumentTypeFilterActive) && (
+                        <PaymentInstrumentTable
+                            items={paymentInstrumentsItems}
+                        />
+                    )}
+                    {isEmpty(paymentInstrumentsItems) && (
+                        <div className="eds-g-cell eds-g-cell-1-1 eds-l-mar-top-16 eds-align--center">
+                            <EmptyState
+                                graphicType={<BankGraphicSvg />}
+                                title={gettext('No payout methods')}
+                                primaryText={
+                                    isEmpty(paymentInstrumentsItems) &&
+                                    this.props.isInstrumentTypeFilterActive
+                                        ? gettext('Remove filter')
+                                        : null
+                                }
+                                onPrimaryAction={this._handleFilter}
+                            />
+                        </div>
+                    )}
+                    {!isEmpty(paymentInstrumentsItems) && (
+                        <div className="eds-g-cell eds-g-cell-1-1 eds-align--center">
+                            <Pagination
+                                pageNumber={paginationSettings.pageNumber}
+                                pageCount={paginationSettings.pageCount}
+                                size="small"
+                                showOnSinglePage={false}
+                                onSelected={this._handlePageChange.bind(this)}
+                            />
+                        </div>
+                    )}
+                </div>
+                {!isEmpty(paymentInstrumentsItems) && (
+                    <div className="eds-g-cell eds-align--left eds-text-bm eds-l-mar-top-4">
+                        {FinancialProfileConstants.EMPTY_STATE_MESSAGE}
+                    </div>
+                )}
+            </div>
+        );
+    };
+}
diff --git a/refactors/logic-and-jsx/4-PullIntoComponents.js b/refactors/logic-and-jsx/4-PullIntoComponents.js
new file mode 100644
index 0000000..74d1fc5
--- /dev/null
+++ b/refactors/logic-and-jsx/4-PullIntoComponents.js
@@ -0,0 +1,378 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
+import isEmpty from 'lodash/isEmpty';
+import gettext from 'js-utils/gettext';
+
+import BankGraphicSvg from 'eventbrite_design_system/iconography/icons/BankGraphic';
+import DataTable from 'eventbrite_design_system/dataTable/DataTable';
+import Dialog from 'eventbrite_design_system/dialog/Dialog';
+import EmptyState from 'eventbrite_design_system/emptyState/EmptyState';
+import Modal from 'eventbrite_design_system/modal/Modal';
+import Pagination from 'eventbrite_design_system/pagination/Pagination';
+import SelectField from 'eventbrite_design_system/inputField/SelectField';
+
+import * as Constants from '../constants';
+import * as FinancialProfileConstants from '../constants/financialProfile';
+import * as AppPropTypes from '../constants/proptypes';
+
+import EventsModal from './EventsModal';
+import { itemPaymentInstrument } from './financialProfileUtils/PaymentInstrument';
+import PaypalForm from './financialProfileUtils/PaypalForm';
+import AuthnetForm from './financialProfileUtils/AuthnetForm';
+import InProgressDialog from './financialProfileUtils/InProgressDialog';
+
+function getPaginationSettings(res) {
+    let pageCount =
+        FinancialProfileConstants.PAYMENT_INSTRUMENT_PAGINATION.PAGE_SIZE;
+    let pageNumber =
+        FinancialProfileConstants.PAYMENT_INSTRUMENT_PAGINATION.DEFAULT_PAGE;
+
+    if (res && res.pagination) {
+        if (typeof res.pagination.pageCount !== 'undefined') {
+            pageCount = res.pagination.pageCount;
+        }
+        if (typeof res.pagination.pageNumber !== 'undefined') {
+            pageNumber = res.pagination.pageNumber;
+        }
+    }
+
+    return { pageCount, pageNumber };
+}
+
+function InstrumentFilter(props) {
+    return (
+        <div className="eds-g-cell eds-g-cell-3-12 eds-align--left eds-l-mar-top-10">
+            <SelectField
+                onChange={props.onFilterChange}
+                name="instrumentTypes"
+                label={FinancialProfileConstants.VIEW_TYPE_LABEL}
+                values={props.filterValues}
+                value={props.filterValue}
+            />
+        </div>
+    );
+}
+
+function PaymentInstrumentTable(props) {
+    return (
+        <div className="eds-g-cell eds-g-cell-1-1">
+            <DataTable
+                items={props.items}
+                columns={Constants.ACCOUNT_SETTINGS_LIST_COLUMNS}
+            />
+        </div>
+    );
+}
+
+function DeletionAllowedDialog(props) {
+    return (
+        <Dialog
+            isShown={props.isShown}
+            message={Constants.DELETION_ALLOWED.message}
+            title={Constants.DELETION_ALLOWED.title}
+            onClose={props.onClose}
+            onSecondaryAction={props.onClose}
+            secondaryText={Constants.DELETION_ALLOWED.secondaryText}
+            secondaryType="link"
+            onPrimaryAction={props.onDeletion}
+            primaryText={Constants.DELETION_ALLOWED.primaryText}
+            primaryType="link"
+            onClickOutside={props.onClose}
+        />
+    );
+}
+
+function DeletionAssociatedEventDialog(props) {
+    return (
+        <Dialog
+            isShown={props.isShown}
+            message={Constants.DELETION_EVENT_ASSOCIATED.message}
+            title={Constants.DELETION_EVENT_ASSOCIATED.title}
+            onClose={props.onClose}
+            onSecondaryAction={props.onViewEventsOnDeletion}
+            secondaryText={Constants.DELETION_EVENT_ASSOCIATED.secondaryText}
+            secondaryType="link"
+            onPrimaryAction={props.onClose}
+            primaryText={Constants.DELETION_EVENT_ASSOCIATED.primaryText}
+            primaryType="link"
+            onClickOutside={props.onClose}
+        />
+    );
+}
+
+function UpdateInstrumentModal(props) {
+    return (
+        <Modal
+            isShown={props.isShown}
+            children={props.children}
+            title={props.title}
+            onClose={props.onClose}
+            onSecondaryAction={props.onClose}
+            secondaryText={
+                Constants.UPDATE_PAYMENT_INSTRUMENT_MODAL.secondaryText
+            }
+            secondaryType="neutral"
+            onPrimaryAction={props.onUpdateInstrument}
+            primaryText={Constants.UPDATE_PAYMENT_INSTRUMENT_MODAL.primaryText}
+            primaryType="fill"
+            onClickOutside={props.onClose}
+        />
+    );
+}
+
+function DeletionEmptyListDialog(props) {
+    return (
+        <Dialog
+            isShown={props.isShown}
+            message={props.message}
+            title={Constants.DELETION_API_ERROR_ASSOCIATED.title}
+            onClose={props.onClose}
+            onPrimaryAction={props.onClose}
+            primaryText={Constants.DELETION_API_ERROR_ASSOCIATED.primaryText}
+            primaryType="link"
+            onClickOutside={props.onClose}
+        />
+    );
+}
+
+function PayoutMethodSummaryInstrumentFilter(props) {
+    return (
+        <InstrumentFilter
+            onFilterChange={props.onFilterChange}
+            filterValue={props.filterValue}
+            filterValues={
+                props.canListPayoutUserInstruments
+                    ? FinancialProfileConstants.INSTRUMENT_TYPES_VALUE_DISPLAY
+                    : FinancialProfileConstants.INSTRUMENT_TYPES_NON_EPP_VALUE_DISPLAY
+            }
+        />
+    );
+}
+
+function PayoutMethodSummaryEmptyState(props) {
+    return (
+        <div className="eds-g-cell eds-g-cell-1-1 eds-l-mar-top-16 eds-align--center">
+            <EmptyState
+                graphicType={<BankGraphicSvg />}
+                title={gettext('No payout methods')}
+                primaryText={
+                    isEmpty(props.items) && props.isFilterActive
+                        ? gettext('Remove filter')
+                        : null
+                }
+                onPrimaryAction={props.onRemoveFilter}
+            />
+        </div>
+    );
+}
+
+function PayoutMethodSummaryPagination(props) {
+    return (
+        <div className="eds-g-cell eds-g-cell-1-1 eds-align--center">
+            <Pagination
+                pageNumber={props.paginationSettings}
+                pageCount={props.paginationSettings}
+                size="small"
+                showOnSinglePage={false}
+                onSelected={props.onPageSelected}
+            />
+        </div>
+    );
+}
+
+function PayoutMethodSummaryEmptyMessage() {
+    return (
+        <div className="eds-g-cell eds-align--left eds-text-bm eds-l-mar-top-4">
+            {FinancialProfileConstants.EMPTY_STATE_MESSAGE}
+        </div>
+    );
+}
+
+export default class PayoutMethodSummary extends PureComponent {
+    static propTypes = {
+        handlePageChange: PropTypes.func,
+        handleDeleteInstrument: PropTypes.func,
+        paymentInstruments: AppPropTypes.PAYMENT_INSTRUMENTS_LIST_PROPS,
+        isEventsModalOpen: PropTypes.bool,
+        showEventsModal: PropTypes.func,
+        hideEventsModal: PropTypes.func,
+        getEvents: PropTypes.func,
+        eventList: AppPropTypes.EVENT_LIST_PROPS,
+        eventId: PropTypes.string,
+        instrumentTypes: PropTypes.string,
+        isInstrumentTypeFilterActive: PropTypes.bool,
+        onChange: PropTypes.func,
+        onClose: PropTypes.func,
+        apiHandledErrors: AppPropTypes.API_ERROR_HANDLING_PROPS,
+        onUpdateModalSubmit: PropTypes.func,
+        updatePaymentInstrument: PropTypes.func,
+        setVaultIdToDelete: PropTypes.func,
+        isUpdateIntrumentModalOpen: PropTypes.bool,
+        showUpdateInstrumentModal: PropTypes.func,
+        hideUpdateInstrumentModal: PropTypes.func,
+        isTryAgainModalOpen: PropTypes.bool,
+        hideTryAgainModal: PropTypes.func,
+        isInProgressDialogOpen: PropTypes.bool,
+        hideInProgressDialog: PropTypes.func,
+        canListPayoutUserInstruments: PropTypes.bool,
+    };
+
+    static defaultProps = {
+        eventList: [],
+        isInstrumentTypeFilterActive: false,
+        apiHandledErrors: null,
+        isEventsModalOpen: false,
+    };
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            isDeletionAssociatedEventDialogShown: false,
+            isDeletionEmptyListDialogShown: false,
+            isDeletionAllowedDialogShown: false,
+            eventIds: [],
+            bankName: '',
+            filterValue: _.first(
+                FinancialProfileConstants.INSTRUMENT_TYPES_VALUE_DISPLAY,
+            ).value,
+            modalUpdateTitle: '',
+            modalUpdateChildren: '',
+        };
+    }
+
+    componentDidUpdate = () => {
+        /* ... */
+    };
+
+    _handlePageChange = page => {
+        /* ... */
+    };
+
+    _getAccountSettingsItems = userInstruments => {
+        /* ... */
+    };
+
+    _getModalUpdateContent = ({ payeeEmail, instrumentType }, vaultId) => {
+        /* ... */
+    };
+
+    _handleItemAction = (vaultId, instrument, instrumentTitle, action) => {
+        /* ... */
+    };
+
+    _handleDialogError = () => {
+        /* ... */
+    };
+
+    _handleFilter = (value, index) => {
+        /* ... */
+    };
+
+    _handleClose = () => {
+        /* ... */
+    };
+
+    _handleClickUpdatePaymentInstrument = () => {
+        /* ... */
+    };
+
+    _handleViewEventsOnDeletion = () => {
+        /* ... */
+    };
+
+    _handleDeletion = () => {
+        /* ... */
+    };
+
+    render = () => {
+        let paginationSettings = getPaginationSettings(
+            this.props.paymentInstruments,
+        );
+
+        let paymentInstrumentsItems = this._getAccountSettingsItems(
+            this.props.paymentInstruments.userInstruments,
+        );
+
+        return (
+            <div>
+                <DeletionAllowedDialog
+                    isShown={this.state.isDeletionAllowedDialogShown}
+                    onClose={this._handleClose}
+                    onDeletion={this._handleDeletion}
+                />
+                <DeletionAssociatedEventDialog
+                    isShown={this.state.isDeletionAssociatedEventDialogShown}
+                    onClose={this._handleClose}
+                    onViewEventsOnDeletion={this._handleViewEventsOnDeletion}
+                />
+                <UpdateInstrumentModal
+                    isShown={this.props.isUpdateIntrumentModalOpen}
+                    children={this.state.modalUpdateChildren}
+                    title={this.state.modalUpdateTitle}
+                    onClose={this.props.hideUpdateInstrumentModal}
+                    onUpdateInstrument={
+                        this._handleClickUpdatePaymentInstrument
+                    }
+                />
+                <InProgressDialog
+                    isInProgressDialogOpen={this.props.isInProgressDialogOpen}
+                    hideInProgressDialog={this.props.hideInProgressDialog}
+                />
+                {!isEmpty(paymentInstrumentsItems) &&
+                    this.props.isEventsModalOpen && (
+                        <EventsModal
+                            eventIds={this.state.eventIds}
+                            bankName={this.state.bankName}
+                            isShown={this.props.isEventsModalOpen}
+                            showEventsModal={this.props.showEventsModal}
+                            hideEventsModal={this.props.hideEventsModal}
+                            getEvents={this.props.getEvents}
+                            eventList={this.props.eventList}
+                        />
+                    )}
+                {!isEmpty(paymentInstrumentsItems) &&
+                    !isEmpty(this.props.apiHandledErrors) && (
+                        <DeletionEmptyListDialog
+                            isShown={this.state.isDeletionEmptyListDialogShown}
+                            message={this.props.apiHandledErrors.errors._error}
+                            onClose={this._handleClose}
+                        />
+                    )}
+                <PayoutMethodSummaryInstrumentFilter
+                    onFilterChange={this._handleFilter}
+                    filterValue={this.state.filterValue}
+                    canListPayoutUserInstruments={
+                        this.props.canListPayoutUserInstruments
+                    }
+                />
+                <div className="eds-g-cell eds-g-cell-1-1 eds-align--left eds-l-mar-top-4">
+                    {(!isEmpty(paymentInstrumentsItems) ||
+                        this.props.isInstrumentTypeFilterActive) && (
+                        <PaymentInstrumentTable
+                            items={paymentInstrumentsItems}
+                        />
+                    )}
+                    {isEmpty(paymentInstrumentsItems) && (
+                        <PayoutMethodSummaryEmptyState
+                            items={paymentInstrumentsItems}
+                            isFilterActive={
+                                this.props.isInstrumentTypeFilterActive
+                            }
+                            onRemoveFilter={this._handleFilter}
+                        />
+                    )}
+                    {!isEmpty(paymentInstrumentsItems) && (
+                        <PayoutMethodSummaryPagination
+                            paginationSettings={paginationSettings}
+                            onPageSelected={this._handlePageChange}
+                        />
+                    )}
+                </div>
+                {!isEmpty(paymentInstrumentsItems) && (
+                    <PayoutMethodSummaryEmptyMessage />
+                )}
+            </div>
+        );
+    };
+}
diff --git a/refactors/logic-and-jsx/README.md b/refactors/logic-and-jsx/README.md
new file mode 100644
index 0000000..6f3ccb9
--- /dev/null
+++ b/refactors/logic-and-jsx/README.md
@@ -0,0 +1,663 @@
+# Logic and JSX Refactor
+
+## Background
+
+The code in [`OriginalFile.js`](0-OriginalFile.js) comes directly out of one of
+our React apps in our Core repo. This file was becoming difficult to maintain,
+and so we looked into refactoring it.
+
+At the time this code was written, we had a React style guide rule about JSX
+that says the following:
+
+> React and JSX supporting logic and markup in the same file allows for
+> substantial complexity in markup generation over other traditional templating
+> languages (like handlebars). But with that increased complexity can come a
+> decrease in readability.
+>
+> In order to maximize both complexity and readability, we suggest keeping all
+> logic out of JSX, except variable references and method calls. Expressions,
+> particularly ternary expressions, should be stored in variables outside of
+> JSX.
+>
+> ```jsx
+> // good
+> render() {
+>     let {includeHeader} = this.props;
+>     let buttons = [1, 2, 3, 4, 5].map((page) => (
+>         <Button key={page} onClick={this._handlePageClick.bind(this, page)} />
+>     ));
+>     let header;
+>
+>     if (includeHeader) {
+>         header = (<h2>Pagination</h2>);
+>     }
+>
+>     return (
+>         <div>
+>             {header}
+>             {buttons}
+>         </div>
+>     );
+> }
+> ```
+>
+> ```js
+> // bad (expressions in JSX)
+> render() {
+>     let {includeHeader} = this.props;
+>
+>     return (
+>         <div>
+>             {includeHeader ? (<h2>Pagination</h2>) : null}
+>             {[1, 2, 3, 4, 5].map((page) => (
+>                 <Button key={page} onClick={this._handlePageClick.bind(this, page)} />
+>             ))}
+>         </div>
+>     );
+> }
+> ```
+>
+> The above "bad" example doesn't seem so bad right? But as we know, code tends
+> to grow over time. If we add more expressions, add more markup to the header,
+> or the map gets more more logic, the code will become unwieldy. Setting up
+> this guideline, even in the most simple examples, helps set the code along the
+> right path.
+
+However, if you look at the `render()` method in
+[`OriginalFile.js`](0-OriginalFile.js) you'll see that, despite following this
+rule, it has become a bit of a mess.
+
+Looking at it quickly, it's hard to tell what is rendered when and what data it
+depends on and where that data comes from.
+
+Let's refactor this component, ignoring the above rule, to see how we can
+improve this real application code.
+
+## Step 1: [`NoDestructuring.js`](1-NoDestructuring.js)
+
+So the first step in untangling this render method is actually to eliminate the
+large amount of destructuring that is happening on the `props`, `state`, and
+some of the imports.
+
+#### Before:
+
+```jsx
+import {
+    ACCOUNT_SETTINGS_LIST_COLUMNS as columns,
+    DELETION_ALLOWED,
+    DELETION_EVENT_ASSOCIATED,
+    DELETION_API_ERROR_ASSOCIATED,
+    UPDATE_PAYMENT_INSTRUMENT_MODAL,
+    FORM_FROM_INSTRUMENT_TYPE,
+} from '../constants';
+
+// ...
+
+const {
+    eventList = [],
+    hideEventsModal,
+    showEventsModal,
+    isInstrumentTypeFilterActive = false,
+    apiHandledErrors = null,
+    getEvents,
+    isEventsModalOpen = false,
+    paymentInstruments: {
+        userInstruments,
+        pagination: {
+            pageCount = PAYMENT_INSTRUMENT_PAGINATION.PAGE_SIZE,
+            pageNumber = PAYMENT_INSTRUMENT_PAGINATION.DEFAULT_PAGE,
+        } = {},
+    } = {},
+    isUpdateIntrumentModalOpen,
+    hideUpdateInstrumentModal,
+    isInProgressDialogOpen,
+    hideInProgressDialog,
+    canListPayoutUserInstruments,
+} = this.props;
+
+// ...
+
+<Modal
+    isShown={isUpdateIntrumentModalOpen}
+    children={modalUpdateChildren}
+    title={modalUpdateTitle}
+    onClose={hideUpdateInstrumentModal}
+    onSecondaryAction={hideUpdateInstrumentModal}
+    secondaryText={UPDATE_PAYMENT_INSTRUMENT_MODAL.secondaryText}
+    secondaryType="neutral"
+    onPrimaryAction={this._handleClickUpdatePaymentInstrument}
+    primaryText={UPDATE_PAYMENT_INSTRUMENT_MODAL.primaryText}
+    primaryType="fill"
+    onClickOutside={hideUpdateInstrumentModal}
+/>;
+```
+
+#### After:
+
+```jsx
+import * as Constants from '../constants';
+
+// ...
+
+<Modal
+    isShown={this.props.isUpdateIntrumentModalOpen}
+    children={this.state.modalUpdateChildren}
+    title={this.state.modalUpdateTitle}
+    onClose={this.props.hideUpdateInstrumentModal}
+    onSecondaryAction={this.props.hideUpdateInstrumentModal}
+    secondaryText={Constants.UPDATE_PAYMENT_INSTRUMENT_MODAL.secondaryText}
+    secondaryType="neutral"
+    onPrimaryAction={this._handleClickUpdatePaymentInstrument}
+    primaryText={Constants.UPDATE_PAYMENT_INSTRUMENT_MODAL.primaryText}
+    primaryType="fill"
+    onClickOutside={this.props.hideUpdateInstrumentModal}
+/>;
+```
+
+We do this so all of the values we are referencing also include where we are
+referencing them from. This makes it easy to move code around because we know
+exactly where everything is coming from. Otherwise, we would have to track down
+a bunch of variables to make sure we maintain the correct references.
+
+## Step 2: [`SplitConditionals.js`](2-SplitConditionals.js)
+
+In our original file we had a lot of long if-then statements, some of which were
+nested. Inside of them we assigned a lot of JSX to variables we rendered later
+on in the `render()` method.
+
+Instead of this, we're going to split up all the JSX that is conditionally
+assigned to variables into their own sections.
+
+#### Before:
+
+```jsx
+let emptyState = null;
+let bottomText = null;
+let pagination = null;
+let filterPrimaryText = null;
+let filter = null;
+let paymentInstrumentTable = null;
+let eventsModal = null;
+let errorDialog = null;
+let paymentInstrumentModalsAndDialogs = null;
+let filterValues = FinancialProfileConstants.INSTRUMENT_TYPES_VALUE_DISPLAY;
+
+// ...
+
+paymentInstrumentTable = (
+    <PaymentInstrumentTable items={paymentInstrumentsItems} />
+);
+if (isEmpty(paymentInstrumentsItems)) {
+    if (this.props.isInstrumentTypeFilterActive) {
+        filterPrimaryText = gettext('Remove filter');
+    } else {
+        paymentInstrumentTable = null;
+    }
+    emptyState = (
+        <div className="eds-g-cell eds-g-cell-1-1 eds-l-mar-top-16 eds-align--center">
+            ...
+        </div>
+    );
+} else {
+    pagination = (
+        <div className="eds-g-cell eds-g-cell-1-1 eds-align--center">...</div>
+    );
+    // ... this goes on ...
+}
+```
+
+#### After:
+
+```jsx
+// --------------------------------------------------------------------
+
+let filterPrimaryText = null;
+if (
+    isEmpty(paymentInstrumentsItems) &&
+    this.props.isInstrumentTypeFilterActive
+) {
+    filterPrimaryText = gettext('Remove filter');
+}
+
+// --------------------------------------------------------------------
+
+let emptyState = null;
+if (isEmpty(paymentInstrumentsItems)) {
+    emptyState = (
+        <div className="eds-g-cell eds-g-cell-1-1 eds-l-mar-top-16 eds-align--center">
+            ...
+        </div>
+    );
+}
+
+// --------------------------------------------------------------------
+
+let bottomText = null;
+if (!isEmpty(paymentInstrumentsItems)) {
+    bottomText = (
+        <div className="eds-g-cell eds-align--left eds-text-bm eds-l-mar-top-4">
+            ...
+        </div>
+    );
+}
+
+// --------------------------------------------------------------------
+
+let pagination = null;
+if (!isEmpty(paymentInstrumentsItems)) {
+    pagination = (
+        <div className="eds-g-cell eds-g-cell-1-1 eds-align--center">...</div>
+    );
+}
+
+// --------------------------------------------------------------------
+```
+
+Now we have something much easier to move around and refactor in more meaningful
+ways. We know exactly what is being rendered, when it is being rendered, and
+what data it needs in order to render. All in nice independent chunks that can
+be cut-and-pasted whereever we want it to go.
+
+We might have repeated some of our conditional logic, and even made the code a
+bit longer. But we've given ourselves something more meaningful:
+Refactorability.
+
+> **Aside:** It's hard to capture what exactly makes some code refactorable and
+> other hard to refactor. But if you're having trouble refactoring some code,
+> consider taking a few intermediate steps to untangle the code and make the
+> refactor easy for yourself. It's far easier to do major refactors in
+> individual steps than to try doing it all at once.
+
+## Step 3: [`InlineLogic.js`](3-InlineLogic.js)
+
+The next step we're going to take is going to go directly against the original
+rule we started out with. We're going to move our conditionally rendered JSX
+code directly into the `render()` method's `return (...)` JSX.
+
+#### Before:
+
+```jsx
+let filter = (
+    <InstrumentFilter
+        onFilterChange={this._handleFilter}
+        filterValue={this.state.filterValue}
+        filterValues={filterValues}
+    />
+);
+
+let eventsModal = null;
+if (!isEmpty(paymentInstrumentsItems) && this.props.isEventsModalOpen) {
+    eventsModal = (
+        <EventsModal
+            eventIds={this.state.eventIds}
+            bankName={this.state.bankName}
+            isShown={this.props.isEventsModalOpen}
+            showEventsModal={this.props.showEventsModal}
+            hideEventsModal={this.props.hideEventsModal}
+            getEvents={this.props.getEvents}
+            eventList={this.props.eventList}
+        />
+    );
+}
+
+let errorDialog = null;
+if (
+    !isEmpty(paymentInstrumentsItems) &&
+    !isEmpty(this.props.apiHandledErrors)
+) {
+    errorDialog = (
+        <Dialog
+            isShown={this.state.isDeletionEmptyListDialogShown}
+            message={this.props.apiHandledErrors.errors._error}
+            title={Constants.DELETION_API_ERROR_ASSOCIATED.title}
+            onClose={this._handleClose}
+            onPrimaryAction={this._handleClose}
+            primaryText={Constants.DELETION_API_ERROR_ASSOCIATED.primaryText}
+            primaryType="link"
+            onClickOutside={this._handleClose}
+        />
+    );
+}
+
+// ...
+
+return (
+    <div>
+        {paymentInstrumentModalsAndDialogs}
+        {filter}
+        <div className="eds-g-cell eds-g-cell-1-1 eds-align--left eds-l-mar-top-4">
+            {paymentInstrumentTable}
+            {emptyState}
+            {pagination}
+        </div>
+        {bottomText}
+    </div>
+);
+```
+
+#### After:
+
+```jsx
+return (
+    <div>
+        ...
+        {!isEmpty(paymentInstrumentsItems) && this.props.isEventsModalOpen && (
+            <EventsModal
+                eventIds={this.state.eventIds}
+                bankName={this.state.bankName}
+                isShown={this.props.isEventsModalOpen}
+                showEventsModal={this.props.showEventsModal}
+                hideEventsModal={this.props.hideEventsModal}
+                getEvents={this.props.getEvents}
+                eventList={this.props.eventList}
+            />
+        )}
+        ...
+        {!isEmpty(paymentInstrumentsItems) &&
+            !isEmpty(this.props.apiHandledErrors) && (
+                <Dialog
+                    isShown={this.state.isDeletionEmptyListDialogShown}
+                    message={this.props.apiHandledErrors.errors._error}
+                    title={Constants.DELETION_API_ERROR_ASSOCIATED.title}
+                    onClose={this._handleClose}
+                    onPrimaryAction={this._handleClose}
+                    primaryText={
+                        Constants.DELETION_API_ERROR_ASSOCIATED.primaryText
+                    }
+                    primaryType="link"
+                    onClickOutside={this._handleClose}
+                />
+            )}
+        ...
+        <InstrumentFilter
+            onFilterChange={this._handleFilter}
+            filterValue={this.state.filterValue}
+            filterValues={
+                this.props.canListPayoutUserInstruments
+                    ? FinancialProfileConstants.INSTRUMENT_TYPES_VALUE_DISPLAY
+                    : FinancialProfileConstants.INSTRUMENT_TYPES_NON_EPP_VALUE_DISPLAY
+            }
+        />
+        ...
+    </div>
+);
+```
+
+If you're not used to writing React code like this, it might seem objectionably
+worse code. And you could make a pretty good argument that it is worse. We're
+not quite done yet, but I would like to take a second to argue that this step in
+our refactor is actually an improvement.
+
+We still have the benefits we had from before. Looking at any one part of this
+large chunk of JSX, we can easily tell what is being rendered, when it is being
+rendered, and what data we need in order to render it (and where that data is
+coming from).
+
+But we now have an additional benefit: We can very easily see where things are
+rendered in relation to one another. If we look at the "Before" code in
+[`SplitConditionals.js`](2-SplitConditionals.js), we're creating a bunch of
+variables that are kind of "floating", as in we don't immediately see where they
+are used. And you'll notice that if you scroll down to the final returned JSX,
+many of those variables aren't being referenced because they are actually used
+inside of other chunks of JSX.
+
+By putting all of the JSX into the `return ()`'d JSX, we can see it clearly as a
+tree, which is going to make the next refactor easier.
+
+## Step 4: [`PullIntoComponents.js`](3-PullIntoComponents.js)
+
+Our final step in this refactor is going to be to take chunks of our
+`return ()`'d JSX and pull them out into their own components.
+
+#### Before:
+
+```jsx
+return (
+    <div>
+        {!isEmpty(paymentInstrumentsItems) &&
+            !isEmpty(this.props.apiHandledErrors) && (
+                <Dialog
+                    isShown={this.state.isDeletionEmptyListDialogShown}
+                    message={this.props.apiHandledErrors.errors._error}
+                    title={Constants.DELETION_API_ERROR_ASSOCIATED.title}
+                    onClose={this._handleClose}
+                    onPrimaryAction={this._handleClose}
+                    primaryText={
+                        Constants.DELETION_API_ERROR_ASSOCIATED.primaryText
+                    }
+                    primaryType="link"
+                    onClickOutside={this._handleClose}
+                />
+            )}
+        ...
+        <InstrumentFilter
+            onFilterChange={this._handleFilter}
+            filterValue={this.state.filterValue}
+            filterValues={
+                this.props.canListPayoutUserInstruments
+                    ? FinancialProfileConstants.INSTRUMENT_TYPES_VALUE_DISPLAY
+                    : FinancialProfileConstants.INSTRUMENT_TYPES_NON_EPP_VALUE_DISPLAY
+            }
+        />
+        ...
+        {isEmpty(paymentInstrumentsItems) && (
+            <div className="eds-g-cell eds-g-cell-1-1 eds-l-mar-top-16 eds-align--center">
+                <EmptyState
+                    graphicType={<BankGraphicSvg />}
+                    title={gettext('No payout methods')}
+                    primaryText={
+                        isEmpty(paymentInstrumentsItems) &&
+                        this.props.isInstrumentTypeFilterActive
+                            ? gettext('Remove filter')
+                            : null
+                    }
+                    onPrimaryAction={this._handleFilter}
+                />
+            </div>
+        )}
+    </div>
+);
+```
+
+#### After:
+
+```jsx
+function DeletionEmptyListDialog(props) {
+    return (
+        <Dialog
+            isShown={props.isShown}
+            message={props.message}
+            title={Constants.DELETION_API_ERROR_ASSOCIATED.title}
+            onClose={props.onClose}
+            onPrimaryAction={props.onClose}
+            primaryText={Constants.DELETION_API_ERROR_ASSOCIATED.primaryText}
+            primaryType="link"
+            onClickOutside={props.onClose}
+        />
+    );
+}
+
+// ...
+
+function PayoutMethodSummaryInstrumentFilter(props) {
+    return (
+        <InstrumentFilter
+            onFilterChange={props.onFilterChange}
+            filterValue={props.filterValue}
+            filterValues={
+                props.canListPayoutUserInstruments
+                    ? FinancialProfileConstants.INSTRUMENT_TYPES_VALUE_DISPLAY
+                    : FinancialProfileConstants.INSTRUMENT_TYPES_NON_EPP_VALUE_DISPLAY
+            }
+        />
+    );
+}
+
+// ...
+
+function PayoutMethodSummaryEmptyState(props) {
+    return (
+        <div className="eds-g-cell eds-g-cell-1-1 eds-l-mar-top-16 eds-align--center">
+            <EmptyState
+                graphicType={<BankGraphicSvg />}
+                title={gettext('No payout methods')}
+                primaryText={
+                    isEmpty(props.items) && props.isFilterActive
+                        ? gettext('Remove filter')
+                        : null
+                }
+                onPrimaryAction={props.onRemoveFilter}
+            />
+        </div>
+    );
+}
+
+// ...
+
+return (
+    <div>
+        {!isEmpty(paymentInstrumentsItems) &&
+            !isEmpty(this.props.apiHandledErrors) && (
+                <DeletionEmptyListDialog
+                    isShown={this.state.isDeletionEmptyListDialogShown}
+                    message={this.props.apiHandledErrors.errors._error}
+                    onClose={this._handleClose}
+                />
+            )}
+        ...
+        <PayoutMethodSummaryInstrumentFilter
+            onFilterChange={this._handleFilter}
+            filterValue={this.state.filterValue}
+            canListPayoutUserInstruments={
+                this.props.canListPayoutUserInstruments
+            }
+        />
+        ...
+        {isEmpty(paymentInstrumentsItems) && (
+            <PayoutMethodSummaryEmptyState
+                items={paymentInstrumentsItems}
+                isFilterActive={this.props.isInstrumentTypeFilterActive}
+                onRemoveFilter={this._handleFilter}
+            />
+        )}
+    </div>
+);
+```
+
+Now our component's `render()` method is _just_ the information we care about
+for the current component, it contains:
+
+-   What is being rendered.
+-   When it is being rendered.
+-   What data it needs in order to render.
+-   Where things render in relation to one another.
+-   And finally (and this is important), **none of the information we don't care
+    about to distract us.**
+
+### Tip 1: Complex conditionals should be pulled into separate functions with data passed in
+
+You'll notice that we've kept the inline conditionals. This is because overall
+they are pretty simple conditionals, all of them are boolean values.
+
+If we had something more complex, we might choose to pull that complexity back
+out into "selectors" or utilities that we can call inline.
+
+```jsx
+// Before:
+function MyComponent(props) {
+    return (
+        <div>
+            {(props.foo === CONSTANT_VALUE && props.bar !== CONSTANT_VALUE) ||
+                (props.foo !== CONSTANT_VALUE &&
+                    props.bar === CONSTANT_VALUE && (
+                        <div>Hello, I have a complex conditional render</div>
+                    ))}
+        </div>
+    );
+}
+
+// After:
+function xorEq(a, b, value) {
+    if (a === value && b !== value) return true;
+    if (a !== value && b === value) return true;
+    return false;
+}
+
+function MyComponent(props) {
+    return (
+        <div>
+            {xorEq(props.foo, props.bar, CONSTANT_VALUE) && (
+                <div>Hello, I have a complex conditional render</div>
+            )}
+        </div>
+    );
+}
+```
+
+### Tip 2: Computed data should be pulled out into variables.
+
+Doing more complex computations that create data for your JSX to render is tough
+to do inline. So in those cases we'll choose to pull the data out into a
+variable, and possibly pull the computation logic into its own function.
+
+```jsx
+// Before:
+function MyComponent(props) {
+    return (
+        <ul>
+            {Object.keys(props.items)
+                .reduce((items, key) => {
+                    return [...items, props.items[key]];
+                }, [])
+                .map((item, index) => {
+                    return { ...item, index };
+                })
+                .filter(item => {
+                    return matchFields(item.fields, props.searchQueryFields);
+                })
+                .map(item => {
+                    return <div key={item.id}>...</div>;
+                })}
+        </ul>
+    );
+}
+
+// After:
+function convertToItemsArray(items) {
+    return Object.keys(items)
+        .reduce((arr, key) => {
+            return [...arr, items[key]];
+        }, [])
+        .map((item, index) => {
+            return { ...item, index };
+        });
+}
+
+function filterItems(items, searchQueryFields) {
+    return items.filter(item => {
+        return matchFields(item.fields, searchQueryFields);
+    });
+}
+
+function MyComponent(props) {
+    let items = convertToItemsArray(props.items);
+    let filteredItems = filterItems(items, props.searchQueryFields);
+    return (
+        <ul>
+            {filteredItems.map(item => {
+                return <div key={item.id}>...</div>;
+            })}
+        </ul>
+    );
+}
+```
+
+> **Note:** Be sure not to pull any of the JSX into these helper functions. As a
+> general rule: If you're writing JSX in a separate function that isn't a
+> component (or inside a class component's `render()` method), you're probably
+> doing something "weird".
+
+## Aftermath
+
+After this refactoring was presented, we decided to change our original rule to
+be more relaxed and allow for this style of refactoring.

From 838702df44fd389302a34000ff4dbeaf94834f25 Mon Sep 17 00:00:00 2001
From: Jamie Kyle <jamie.kyle@eventbrite.com>
Date: Fri, 23 Aug 2019 15:19:27 -0700
Subject: [PATCH 2/4] fix gh highlighting

---
 react/README.md                   |  2 +-
 refactors/README.md               |  4 ++--
 refactors/logic-and-jsx/README.md | 22 +++++++++++-----------
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/react/README.md b/react/README.md
index 00ca0db..a59315b 100644
--- a/react/README.md
+++ b/react/README.md
@@ -1695,7 +1695,7 @@ describe which logic is complex and which is not. But if it starts to become
 hard to read at a glance, you might want to pull that logic out into a small
 utility function.
 
-```jsx
+```js
 // bad (complex inline conditions)
 function MyComponent(props) {
     return (
diff --git a/refactors/README.md b/refactors/README.md
index 0597de5..6d18c43 100644
--- a/refactors/README.md
+++ b/refactors/README.md
@@ -10,7 +10,7 @@
 
 **Before:**
 
-```jsx
+```js
 class MyComponent extends React.Component {
     render() {
         let { foo, bar } = this.props;
@@ -39,7 +39,7 @@ class MyComponent extends React.Component {
 
 **After:**
 
-```jsx
+```js
 function Component1(props) {
     return <SomeComponent kind="gah" foo={props.foo} baz={props.baz} />;
 }
diff --git a/refactors/logic-and-jsx/README.md b/refactors/logic-and-jsx/README.md
index 6f3ccb9..810577e 100644
--- a/refactors/logic-and-jsx/README.md
+++ b/refactors/logic-and-jsx/README.md
@@ -19,7 +19,7 @@ that says the following:
 > particularly ternary expressions, should be stored in variables outside of
 > JSX.
 >
-> ```jsx
+> ```js
 > // good
 > render() {
 >     let {includeHeader} = this.props;
@@ -81,7 +81,7 @@ some of the imports.
 
 #### Before:
 
-```jsx
+```js
 import {
     ACCOUNT_SETTINGS_LIST_COLUMNS as columns,
     DELETION_ALLOWED,
@@ -134,7 +134,7 @@ const {
 
 #### After:
 
-```jsx
+```js
 import * as Constants from '../constants';
 
 // ...
@@ -170,7 +170,7 @@ assigned to variables into their own sections.
 
 #### Before:
 
-```jsx
+```js
 let emptyState = null;
 let bottomText = null;
 let pagination = null;
@@ -208,7 +208,7 @@ if (isEmpty(paymentInstrumentsItems)) {
 
 #### After:
 
-```jsx
+```js
 // --------------------------------------------------------------------
 
 let filterPrimaryText = null;
@@ -276,7 +276,7 @@ code directly into the `render()` method's `return (...)` JSX.
 
 #### Before:
 
-```jsx
+```js
 let filter = (
     <InstrumentFilter
         onFilterChange={this._handleFilter}
@@ -337,7 +337,7 @@ return (
 
 #### After:
 
-```jsx
+```js
 return (
     <div>
         ...
@@ -411,7 +411,7 @@ Our final step in this refactor is going to be to take chunks of our
 
 #### Before:
 
-```jsx
+```js
 return (
     <div>
         {!isEmpty(paymentInstrumentsItems) &&
@@ -461,7 +461,7 @@ return (
 
 #### After:
 
-```jsx
+```js
 function DeletionEmptyListDialog(props) {
     return (
         <Dialog
@@ -562,7 +562,7 @@ they are pretty simple conditionals, all of them are boolean values.
 If we had something more complex, we might choose to pull that complexity back
 out into "selectors" or utilities that we can call inline.
 
-```jsx
+```js
 // Before:
 function MyComponent(props) {
     return (
@@ -600,7 +600,7 @@ Doing more complex computations that create data for your JSX to render is tough
 to do inline. So in those cases we'll choose to pull the data out into a
 variable, and possibly pull the computation logic into its own function.
 
-```jsx
+```js
 // Before:
 function MyComponent(props) {
     return (

From 0f33c6f3722762a9b7dee39b2623f493ae54fdc8 Mon Sep 17 00:00:00 2001
From: Jamie Kyle <jamie.kyle@eventbrite.com>
Date: Fri, 23 Aug 2019 15:23:17 -0700
Subject: [PATCH 3/4] fix link

---
 refactors/logic-and-jsx/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/refactors/logic-and-jsx/README.md b/refactors/logic-and-jsx/README.md
index 810577e..d1d985e 100644
--- a/refactors/logic-and-jsx/README.md
+++ b/refactors/logic-and-jsx/README.md
@@ -404,7 +404,7 @@ inside of other chunks of JSX.
 By putting all of the JSX into the `return ()`'d JSX, we can see it clearly as a
 tree, which is going to make the next refactor easier.
 
-## Step 4: [`PullIntoComponents.js`](3-PullIntoComponents.js)
+## Step 4: [`PullIntoComponents.js`](4-PullIntoComponents.js)
 
 Our final step in this refactor is going to be to take chunks of our
 `return ()`'d JSX and pull them out into their own components.

From 4cce88c78deb146892c1e85d0ffc611d20853131 Mon Sep 17 00:00:00 2001
From: Jamie Kyle <jamie.kyle@eventbrite.com>
Date: Mon, 26 Aug 2019 11:56:29 -0700
Subject: [PATCH 4/4] Update README.md

---
 react/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/react/README.md b/react/README.md
index a59315b..dde0885 100644
--- a/react/README.md
+++ b/react/README.md
@@ -1636,7 +1636,7 @@ function Component1(props) {
 }
 
 function Component2(props) {
-    return <SomeComponent kind="goop" bar={bar} baz={baz} />;
+    return <SomeComponent kind="goop" bar={props.bar} baz={props.baz} />;
 }
 
 class MyComponent extends React.Component {