eslint-plugin-react: button-has-type is not allowing a ternary statement

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;

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 16 (9 by maintainers)

Most upvoted comments

@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!

jason-chen-kiewit on Apr 16, 2021

@ljharb please see below.

{
  "_from": "eslint-plugin-react@latest",
  "_id": "eslint-plugin-react@7.23.2",
  "_inBundle": false,
  "_integrity": "sha512-AfjgFQB+nYszudkxRkTFu0UR1zEQig0ArVMPloKhxwlwkzaw/fBiH0QWcBBhZONlXqQC51+nfqFrkn4EzHcGBw==",
  "_location": "/eslint-plugin-react",
  "_phantomChildren": {
    "call-bind": "1.0.2",
    "define-properties": "1.1.3",
    "es-to-primitive": "1.2.1",
    "esutils": "2.0.3",
    "function-bind": "1.1.1",
    "get-intrinsic": "1.1.1",
    "has": "1.0.3",
    "is-core-module": "2.2.0",
    "is-negative-zero": "2.0.1",
    "is-string": "1.0.5",
    "object-keys": "1.1.1",
    "path-parse": "1.0.6",
    "unbox-primitive": "1.0.1"
  },
  "_requested": {
    "type": "tag",
    "registry": true,
    "raw": "eslint-plugin-react@latest",
    "name": "eslint-plugin-react",
    "escapedName": "eslint-plugin-react",
    "rawSpec": "latest",
    "saveSpec": null,
    "fetchSpec": "latest"
  },
  "_requiredBy": [
    "#DEV:/",
    "#USER"
  ],
  "_resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.23.2.tgz",
  "_shasum": "2d2291b0f95c03728b55869f01102290e792d494",
  "_spec": "eslint-plugin-react@latest",
  "_where": "C:\\Users\\Jason.Chen\\repos\\larry",
  "author": {
    "name": "Yannick Croissant",
    "email": "yannick.croissant+npm@gmail.com"
  },
  "bugs": {
    "url": "https://github.com/yannickcr/eslint-plugin-react/issues"
  },
  "bundleDependencies": false,
  "dependencies": {
    "array-includes": "^3.1.3",
    "array.prototype.flatmap": "^1.2.4",
    "doctrine": "^2.1.0",
    "has": "^1.0.3",
    "jsx-ast-utils": "^2.4.1 || ^3.0.0",
    "minimatch": "^3.0.4",
    "object.entries": "^1.1.3",
    "object.fromentries": "^2.0.4",
    "object.values": "^1.1.3",
    "prop-types": "^15.7.2",
    "resolve": "^2.0.0-next.3",
    "string.prototype.matchall": "^4.0.4"
  },
  "deprecated": false,
  "description": "React specific linting rules for ESLint",
  "devDependencies": {
    "@types/eslint": "^7.2.8",
    "@types/estree": "^0.0.47",
    "@types/node": "^14.14.37",
    "@typescript-eslint/parser": "^2.34.0",
    "aud": "^1.1.4",
    "babel-eslint": "^8.2.6",
    "eslint": "^3 || ^4 || ^5 || ^6 || ^7",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-plugin-eslint-plugin": "^2.3.0",
    "eslint-plugin-import": "^2.22.1",
    "espree": "^3.5.4",
    "istanbul": "^0.4.5",
    "markdown-magic": "^1.0.0",
    "mocha": "^5.2.0",
    "semver": "^6.3.0",
    "sinon": "^7.5.0",
    "typescript": "^3.9.9",
    "typescript-eslint-parser": "^20.1.1"
  },
  "engines": {
    "node": ">=4"
  },
  "files": [
    "LICENSE",
    "README.md",
    "index.js",
    "lib"
  ],
  "greenkeeper": {
    "ignore": [
      "semver"
    ]
  },
  "homepage": "https://github.com/yannickcr/eslint-plugin-react",
  "keywords": [
    "eslint",
    "eslint-plugin",
    "eslintplugin",
    "react"
  ],
  "license": "MIT",
  "main": "index.js",
  "name": "eslint-plugin-react",
  "peerDependencies": {
    "eslint": "^3 || ^4 || ^5 || ^6 || ^7"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/yannickcr/eslint-plugin-react.git"
  },
  "scripts": {
    "generate-list-of-rules": "md-magic --path README.md",
    "generate-list-of-rules:check": "npm run generate-list-of-rules && git diff --exit-code README.md",
    "lint": "eslint ./",
    "postlint": "npm run type-check",
    "posttest": "aud --production",
    "pretest": "npm run lint",
    "test": "npm run unit-test",
    "type-check": "tsc",
    "unit-test": "istanbul cover node_modules/mocha/bin/_mocha tests/lib/**/*.js tests/util/**/*.js tests/index.js"
  },
  "version": "7.23.2"
}

jason-chen-kiewit on Apr 16, 2021

Indeed https://github.com/yannickcr/eslint-plugin-react/commit/d8741de74da0fb7a0cb730f0fea14de05e4faa9b should be in v7.21.0+ via #2748.

(cc @Hypnosphi)

This seems like a bug.

ljharb on Apr 16, 2021