Inline eslint comment in JSX

Question

I get an error (eslint): Line 199 exceeds maximum line length of 120. (max-len)

Why doesn't this inline comment work?

 {/* eslint-disable-next-line max-len */} <Chip ref="code" style={styles.chip}backgroundColor={this.state.filterSelected['School Code'] && blue300}onTouchTap={this.handleTouchTap} > <Avatar size={32}>C</Avatar> School Code </Chip> 

Answer 1

eslint-disable-line and eslint-disable-next-line are only in line comments.

There is currently an open issue for this in eslint

So you need to write it like the following:

 { // eslint-disable-next-line max-len }<Chip ref="code" style={styles.chip}backgroundColor={this.state.filterSelected['School Code'] && blue300}onTouchTap={this.handleTouchTap} > <Avatar size={32}>C</Avatar> School Code </Chip> 

Answer 2

Daniel's answer works fine, but it breaks "jsx-one-expression-per-line".

The latest version of eslint (6.5.1) supports the multi-line comment method, as shown in the question. There is no need to change anything.