fix(no setState in render)

packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/index.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux'
 import { bindActionCreators, compose } from 'redux'
 import { Field, reduxForm } from 'redux-form'
 import ui from 'redux-ui'
-import { path } from 'ramda'
+import { path, prop } from 'ramda'
 
 import { actions } from 'data'
 import { TabMenuBuySellStatus } from 'components/Form'
@@ -40,8 +40,7 @@ const Menu = reduxForm({ form: 'buySellTabStatus' })(HorizontalMenu)
 class BuySellContainer extends React.PureComponent {
   constructor (props) {
     super(props)
-    this.state = { partner: '' }
-    this.renderPartner = this.renderPartner.bind(this)
+    this.selectPartner = this.selectPartner.bind(this)
     this.submitEmail = this.submitEmail.bind(this)
   }
 
@@ -51,27 +50,35 @@ class BuySellContainer extends React.PureComponent {
   }
 
   /**
-   * The idea here is that we will call .cata which passes a metadata value to a renderPartner method.
+   * The idea here is that we will call .cata which passes a metadata value to a selectPartner method.
    * If there is a token (evidence of signup), show the Checkout view.
    * If not, open the tray and send user through the signup flow.
    */
 
-  renderPartner (buySell, options, type) {
+  selectPartner (buySell, options, type) {
     if (path(['sfox', 'account_token'], buySell)) {
-      this.setState({ partner: 'sfox' })
-      return <SfoxCheckout type={type} options={options} value={buySell} />
+      return {
+        component: <SfoxCheckout type={type} options={options} value={buySell} />,
+        partner: 'sfox'
+      }
     }
     if (path(['unocoin', 'token'], buySell)) { // TODO replace token
-      this.setState({ partner: '' })
-      return <span>Unocoin</span>
+      return {
+        component: <span>Unocoin</span>,
+        partner: ''
+      }
     }
     if (path(['coinify', 'offline_token'], buySell)) {
-      this.setState({ partner: 'coinify' })
-      return <CoinifyCheckout type={type} options={options} value={buySell} />
+      return {
+        component: <CoinifyCheckout type={type} options={options} value={buySell} />,
+        partner: 'coinify'
+      }
+    }
+    return {
+      component: <SelectPartner type={type} options={options} value={buySell}
+        onSubmit={this.onSubmit} submitEmail={this.submitEmail} {...this.props} />,
+      partner: ''
     }
-    this.setState({ partner: '' })
-    return <SelectPartner type={type} options={options} value={buySell}
-      onSubmit={this.onSubmit} submitEmail={this.submitEmail} {...this.props} />
   }
 
   submitEmail () {
@@ -83,7 +90,7 @@ class BuySellContainer extends React.PureComponent {
     const { data, fields } = this.props
 
     const view = data.cata({
-      Success: (value) => this.renderPartner(path(['buySell', 'value'], value), value.options, path(['type'], fields), fields),
+      Success: (value) => this.selectPartner(path(['buySell', 'value'], value), value.options, path(['type'], fields), fields),
       Failure: (message) => <div>failure: {message}</div>,
       Loading: () => <Loading />,
       NotAsked: () => <Loading />
@@ -92,14 +99,14 @@ class BuySellContainer extends React.PureComponent {
     return (
       <Wrapper>
         {
-          hasAccount(view.props.value)
+          hasAccount(path(['component', 'props', 'value'], view))
             ? <Menu>
-              <Field name='status' component={TabMenuBuySellStatus} partner={this.state.partner} />
+              <Field name='status' component={TabMenuBuySellStatus} partner={prop('partner', view)} />
             </Menu>
             : null
         }
         <CheckoutWrapper>
-          {view}
+          {prop('component', view)}
         </CheckoutWrapper>
       </Wrapper>
     )