I am working on a ReactJS project and I am getting the following error:

? should be placed at the beginning of the line operator-linebreak

Here is the snippet:

{
  index === 0 ?
    <div className='grid__row--offset--40 row'>
      <div className='small-40 columns small-centered'>
        <a className='text--white text--center text--font-size-14 button medium radius secondary' href={lang.howTiles[0].button.url}><font><font>{lang.howTiles[0].button.title}</font></font></a>
        <a href='http://localhost/slack'><img alt='Add to Slack' height='40' width='139' src='.png' srcSet='.png 1x, /[email protected] 2x' /></a>
      </div>
    </div>
    : null
}

I am working on a ReactJS project and I am getting the following error:

? should be placed at the beginning of the line operator-linebreak

Here is the snippet:

{
  index === 0 ?
    <div className='grid__row--offset--40 row'>
      <div className='small-40 columns small-centered'>
        <a className='text--white text--center text--font-size-14 button medium radius secondary' href={lang.howTiles[0].button.url}><font><font>{lang.howTiles[0].button.title}</font></font></a>
        <a href='http://localhost/slack'><img alt='Add to Slack' height='40' width='139' src='https://platform.slack-edge./img/add_to_slack.png' srcSet='https://platform.slack-edge./img/add_to_slack.png 1x, https://platform.slack-edge./img/[email protected] 2x' /></a>
      </div>
    </div>
    : null
}

• javascript
• reactjs

• please post entire ponent. Otherwise it's hard to see what's going on. – Ravindra Ranwala Commented May 12, 2017 at 16:59

1 Answer 1

This is part of ESLint's operator-linebreak style rule:

Rule Details

This rule enforces a consistent linebreak style for operators.

And by default, the rule is set to allow operators to be after an expression except when using ? and ::

The default configuration is "after", { "overrides": { "?": "before", ":": "before" } }

Thus, put your ? on a newline before your JSX as the rule states:

{
  index === 0
    ? <div>
        {/* Your JSX here */}
      <div>
    : null
}

If you don't like this you can reconfigure it in your .eslintrc or other configuration file. With what you're trying to do, try this configuration:

"operator-linebreak": [
  "error",
  "after",
  {
    "overrides": {
      ":": "before"
    }
  }
]