button-has-type is not allowing a ternary statement

[jason-chen-kiewit]

I'm trying to add a ternary statement to dynamically determine which type to apply to this button component. According to https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/button-has-type.md, this should work?

The error message:

The button type attribute must be a static string

My code:

import React from 'react';
import {
  string,
  bool,
  arrayOf,
  node,
  func,
  oneOf,
  oneOfType,
} from 'prop-types';
import styles from './StyledButton.module.css';

const StyledButton = ({ children, size, type, colorScheme, ...otherProps }) => {
  const assignClassName = () => {
    const style = [styles.button];
    if (colorScheme) {
      style.push(styles[colorScheme]);
    }
    if (size) {
      style.push(styles[size]);
    }
    return style.join(' ');
  };

  const test = false;
  return (
    <button
      className={assignClassName(colorScheme, size)}
      type={test ? 'submit' : 'button'} // <================ why doesn't this work?
      {...otherProps}
    >
      {children}
    </button>
  );
};

StyledButton.propTypes = {
  children: oneOfType([arrayOf(node), node]).isRequired,
  onClick: func.isRequired,
  size: string.isRequired,
  type: bool.isRequired,
  colorScheme: oneOf(['default', 'bright', 'vivid']).isRequired,
};

export default StyledButton;

[ljharb]

I believe, because ...otherProps after it might contain type. What happens if you move type to be after ...otherProps?

[jason-chen-kiewit]

I just tried moving it as you suggested and removing otherProps entirely. Neither worked and there was no change to the error description. =/

[ljharb]

What version of the plugin are you using?

[jason-chen-kiewit]

"eslint-plugin-react": "^7.23.2",

[ljharb]

Indeed d8741de should be in v7.21.0+ via #2748.

(cc @Hypnosphi)

This seems like a bug.

[Hypnosphi]

@jason-chen-kiewit please share your eslint config. I can't reproduce it with just "react/button-has-type": "error"

[jason-chen-kiewit]

Thanks for looking into this!

eslintrc.json

{
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": [
    "plugin:react/recommended",
    "airbnb",
    "plugin:prettier/recommended"
  ],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": ["react"],
  "rules": {
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [".js", ".jsx"]
      }
    ],
    "prettier/prettier": ["error", { "endOfLine": "auto" }]
  }
}

[Hypnosphi]

I tried to replicate your setup and I only get an error from react/jsx-props-no-spreading
https://github.com/Hypnosphi/eslint-button-type-ternary

% npm run lint

> untitled@1.0.0 lint /Users/jetbrains/IdeaProjects/untitled
> eslint .


/Users/jetbrains/IdeaProjects/untitled/index.js
  30:7  error  Prop spreading is forbidden  react/jsx-props-no-spreading

✖ 1 problem (1 error, 0 warnings)

[jason-chen-kiewit]

@Hypnosphi thanks for trying to replicate it, I think this means that there is something specific in my setup that is not right...

Would love to hear ideas on where to start looking though. ><;

[ljharb]

Wait - you’re getting this error in your ide, not on the command line?

[ljharb]

The command line is the source of truth; if it works properly there it’s an issue with the editor. Note that every editor I’m aware of needs to be restarted after an npm install before it picks up the new eslint stuff.

[jason-chen-kiewit]

@ljharb You're right! I have husky to prevent the commit from happening if it finds an error and it looks like it went through no problem.

still weird... but I'll take it.

[ljharb]

Does restarting your editor fix the problem?

[jason-chen-kiewit]

@ljharb Yes it does... I had updated to the newest version and I didn't think to restart my vscode. 🤦

Thank you for all the help regardless!