Inline eslint comment in JSX

Question

I'm getting 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 inline comments.

There is currently an open issue for this in eslint

So you would have to write it as 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".

Latest version of eslint (6.5.1) supports the multi-line comment method as shown in question. There isn't need to change anything.