react 16 failure - cannot read all 'messages' of null

[rosskevin]

connectToMessageContainer.js:100 Uncaught TypeError: Cannot read property 'allMessages' of null
    at MessageListener.<anonymous> (connectToMessageContainer.js:100)
    at getStateFromUpdate (react-dom.development.js:7149)
    at beginUpdateQueue (react-dom.development.js:7198)
    at updateClassInstance (react-dom.development.js:9982)
    at updateClassComponent (react-dom.development.js:10224)
    at beginWork (react-dom.development.js:10605)
    at performUnitOfWork (react-dom.development.js:12573)
    at workLoop (react-dom.development.js:12682)
    at HTMLUnknownElement.callCallback (react-dom.development.js:1299)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:1338)

react-dom.development.js:8305 The above error occurred in the <MessageListener> component:
    in MessageListener (created by Submit)

[jquense]

Hmm not great. I haven't seen this so far, I wonder if it's related to v16 lifecycle hook changes. I'll take a look

[rosskevin]

Sorry, thought this was inside react formal, but it's my Submit component. Still related to Form.Trigger.

Usage may help then?

// @flow

import Form from '@alienfast/react-formal'
import React from 'react'
import Button from '../Button'
import Logger from '../util/Logger'
import type {Node} from 'react'

/**
 * private - we simply need to pass this in for submit
 */
const RaisedButton = (props: { errors?: Object, children?: Node }) => {
  const { children, ...rest } = props
  return (<Button raised {...rest}>{children}</Button>)
}

type Props = {
  raised?: boolean,
  disabled?: boolean,
  children?: Node
}

const Submit = (props: Props) => {
  const {
    raised,
    disabled,
    children,
    ...rest
  } = props

  return (
    // $FlowFixMe
    <Form.Trigger group='@all'>
      {({ messages }) => {
        const errors = !!Object.keys(messages).length

        // disable when marked as such or errors
        let styleProps
        if (disabled || errors) {
          styleProps = { disabled: true }
        }

        log.debug('render', styleProps, errors || disabled, props)
        return (
          // $FlowFixMe
          <Form.Button
            type='submit'
            {...rest}
            {...styleProps}
            component={raised ? RaisedButton : Button}
          >
            {children}
          </Form.Button>
        )
      }}
    </Form.Trigger>
  )
}

const log = Logger.get('Submit')
export default Submit