Skip to content

Arrow function problems in classes #365

Closed
@Kareeeeem

Description

@Kareeeeem

Hi, I updated my plugins today and I encountered an error.

When putting arrow functions inside (react) classes it breaks highlighting and also matchfinding of braces.

This is what was working fine before. Notice the messed up highlighting and the last brace of the class that is mistakenly highlighted as an error.
screenshot 2016-04-09 at 22 01 49

To fix it I have to write normal functions like so.
screenshot 2016-04-09 at 22 01 06

for completeness here is the code and the minimal vimrc (I elimited the jsx highlighter as the culprit.)

filetype off                                                                    

call plug#begin('~/.vim/plugged')                                               

Plug 'pangloss/vim-javascript', {'for': '*javascript*'}                         
Plug 'mxw/vim-jsx', {'for': '*javascript*'}                                     
call plug#end()                                                                 
colorscheme ron                                                                 
let g:jsx_ext_required = 0
import React, { Component } from 'react'
import { connect } from 'react-redux'

function Button (props) {
  return <button
    name={props.name}
    onClick={props.handlePagination}
    disabled={props.disabled}
  >
    {props.children}
  </button>
}

function Pagination (props) {
  return (
    <div>
      <Button
        name='prev'
        handlePagination={props.handlePagination}
        disabled={props.disabledPrev}
      > prev </Button>

      <Button
        name='next'
        handlePagination={props.handlePagination}
        disabled={props.disabledNext}
      > next </Button>
    </div>
  )
}

class Paginated extends Component {
  handlePagination = (e) => {
    const pageTurn = e.target.name // either 'prev' or 'next'
    const newPageUrl = this.props.page[pageTurn] // either link or undefined
    // Only dispatch the pageturn if the newPageUrl evaluates to true
    // Pagination option should be diabled but just to be defensive against
    // errors.
    if (newPageUrl) this.props.getNewPage(newPageUrl)
  }

  componentDidMount () {
    if (!this.props.children.length) this.props.getNewPage()
  }

  render () {
    return (
      <div>
        {this.props.children}
        <Pagination
          disabledPrev={this.props.page.prev ? false : true}
          disabledNext={this.props.page.next ? false : true}
          handlePagination={this.handlePagination}
        />
      </div>
    )
  }
}

Paginated.propTypes = {
  page: React.PropTypes.object.isRequired,
  getNewPage: React.PropTypes.func.isRequired,
}

export default Paginated

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions