How to use the mobx-react.PropTypes.observableArrayOf function in mobx-react

Contributing 
              
            
            : null
          }
        
        {content}
      
    );
  }
}

SidebarList.propTypes = {
  isSearching: PropTypes.bool.isRequired,
  location: PropTypes.object.isRequired,
  content: MobxPropTypes.observableArrayOf(
    PropTypes.object
  ).isRequired,
  matchingNodes: PropTypes.object.isRequired
};

export default SidebarList;

import { Account } from 'Utils/propTypes'
import { MenuItem, OverlayTrigger, SplitButton, Tooltip } from 'react-bootstrap'
import { PropTypes as PM } from 'mobx-react'
import { Text } from 'react-localize'
import { getJid, noop } from 'Utils'

import React from 'react'
import images from '~/images'

const ConnectionSplitButtonProps = {
  accounts: PM.observableArrayOf(Account).isRequired
}

class ConnectionSplitButton extends React.Component {
  constructor (props) {
    super(props)
    this.connectionStateMap = {
      'INITIALIZING': { onClick: this.props.onConnect, messageId: 'action.connect', icon: images.accountDisconnectedIcon },
      'NOT_CONNECTED': { onClick: this.props.onConnect, messageId: 'action.connect', icon: images.accountDisconnectedIcon },
      'CONNECTED': { onClick: this.props.onDisconnect, messageId: 'action.disconnect', icon: images.accountConnectedIcon },
      'ERROR': { onClick: noop, messageId: 'action.connectionError', icon: images.accountConnectionErrorIcon },
      'CONNECTING': { onClick: noop, messageId: 'action.connecting', icon: images.accountConnectingIcon },
      'DISCONNECTING': { onClick: noop, messageId: 'action.disconnecting', icon: images.accountDisconnectingIcon }
    }
  }

  render () {

import { Account } from 'Utils/propTypes'
import { DropdownButton, MenuItem } from 'react-bootstrap'
import { PropTypes as PM } from 'mobx-react'
import { Text } from 'react-localize'
import { getJid } from 'Utils'
import P from 'prop-types'
import React from 'react'

const AccountsProps = {
  activeAccount: Account.isRequired,
  accounts: PM.observableArrayOf(Account).isRequired,
  onChangeActiveAccount: P.func.isRequired
}

const Accounts = ({
  activeAccount,
  accounts,
  onChangeActiveAccount
}) => (
  <div>
    { (typeof activeAccount === 'object' &amp;&amp; activeAccount.username &amp;&amp; activeAccount.domain)
      ? `${activeAccount.username}@${activeAccount.domain}`
      : </div>

import { Account } from 'Utils/propTypes'
import { Dropdown, OverlayTrigger, SplitButton, Tooltip } from 'react-bootstrap'
import { PropTypes as PM } from 'mobx-react'
import { Text } from 'react-localize'
import { getJid, noop } from 'Utils'

import React from 'react'
import images from '~/images'

const ConnectionSplitButtonProps = {
  accounts: PM.observableArrayOf(Account).isRequired
}

class ConnectionSplitButton extends React.Component {
  constructor (props) {
    super(props)
    this.connectionStateMap = {
      'INITIALIZING': { onClick: this.props.onConnect, messageId: 'action.connect', icon: images.accountDisconnectedIcon },
      'NOT_CONNECTED': { onClick: this.props.onConnect, messageId: 'action.connect', icon: images.accountDisconnectedIcon },
      'CONNECTED': { onClick: this.props.onDisconnect, messageId: 'action.disconnect', icon: images.accountConnectedIcon },
      'ERROR': { onClick: noop, messageId: 'action.connectionError', icon: images.accountConnectionErrorIcon },
      'CONNECTING': { onClick: noop, messageId: 'action.connecting', icon: images.accountConnectingIcon },
      'DISCONNECTING': { onClick: noop, messageId: 'action.disconnecting', icon: images.accountDisconnectingIcon }
    }
  }

  render () {

{chosen.isOther &amp;&amp; <span>Enter the full path to the executable of the editor</span>}
      
    
  )
})

const editorType = PropTypes.shape({
  id: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  openerId: PropTypes.string.isRequired,
  isOther: PropTypes.bool.isRequired,
})

EditorPicker.propTypes = {
  chosenEditor: editorType,
  editors: MobxPropTypes.observableArrayOf(editorType).isRequired,
  onSelect: PropTypes.func.isRequired,
  onUpdateOtherPath: PropTypes.func.isRequired,
}

export default EditorPicker

const { data } = this.props

    return (
      <ul>
        {data.length &gt; 0 ? (
          data.map((item) =&gt; )
        ) : (
          <div> no data </div>
        )}
      </ul>
    )
  }
}

TodoList.wrappedComponent.propTypes = {
  data: PropTypes.observableArrayOf(PropTypes.observableObject).isRequired,
}

export default TodoList

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import distanceInWords from 'date-fns/distance_in_words';
import { observer, PropTypes as pt } from 'mobx-react';
import throttle from 'lodash.throttle';

import MessageItem from './MessageItem';
import UnseenMessages from './UnseenMessages';

class MessageList extends Component {
  static propTypes = {
    messages: pt.observableArrayOf(PropTypes.shape({
      timestamp: PropTypes.string.isRequired,
      content: PropTypes.string.isRequired,
      type: PropTypes.oneOf(['message', 'file']).isRequired,
      sender: PropTypes.object.isRequired,
    })).isRequired,
    user: PropTypes.object.isRequired,
    unseenMessages: PropTypes.bool.isRequired,
    followingMessages: PropTypes.bool.isRequired,
  }

  /**
   * NOTE:
   * Mobx makes using componentWillReceiveProps impossible.
   * So we are forced to use componentWill/DidUpdate instead...
   */
  componentDidUpdate() {