'missing in props validation' when returning with a ternary operator

[Shags]

It took me a bit to figure out why I was getting a 'missing in props validation' error in my project. Turns out, returning with a ternary operator was causing the linter to produce this error. Refactoring a bit fixes it. Can anyone else reproduce this?

// @flow
import React from 'react'

type Props = {
  x: string
}

const val = true

// ************* The following produces:
// 'x' is missing in props validation - eslintreact/prop-types
export const problem = ({ x }: Props) => {
  return val ? (
    <div>
      {x}
    </div>
  ) : (
    <div>Nothing</div>
  )
}

// ************ This does not cause an issue
export const notProblem = ({ x }: Props) => {
  const div = val ? (
    <div>
      {x}
    </div>
  ) : (
    <div>Nothing</div>
  )
  return div
}

// ************* Nor does this
export const alsoNotProblem = ({ x }: Props) => {
  if (val) {
    return (
      <div>
        {x}
      </div>
    )
  } else {
    return (
      <div>Nothing</div>
    )
  }
}

My eslint config is:

{
"eslintConfig": {
    "env": {
      "browser": true,
      "jest": true,
      "es6": true
    },
    "extends": [
      "plugin:react/recommended",
      "plugin:flowtype/recommended",
      "standard",
      "react-app"
    ],
    "globals": {
      "Atomics": "readonly",
      "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
      "ecmaFeatures": {
        "jsx": true
      },
      "ecmaVersion": 2018,
      "sourceType": "module"
    },
    "plugins": [
      "react",
      "flowtype",
      "simple-import-sort"
    ],
    "settings": {
      "react": {
        "version": "detect"
      },
      "import/resolver": {
        "node": {
          "moduleDirectory": [
            "node_modules",
            "src/"
          ]
        }
      },
      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      }
    },
    "rules": {
      "simple-import-sort/sort": ["error",
        {
          "groups": [
            ["^react$", "^\\u0000", "^[^A-Z].*"],
            ["^[A-Z].*"],
            ["^\\."]
          ]
        }]
    }
  }
}

Package versions:

    "eslint": "^7.4.0",
    "eslint-config-react-app": "^5.2.1",
    "eslint-config-standard": "^14.1.1",
    "eslint-plugin-flowtype": "^5.2.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.20.3",
    "eslint-plugin-simple-import-sort": "^5.0.3",
    "eslint-plugin-standard": "^4.0.1",

[hank121314]

This is a bug in 7.20.3.
Will be fixed by pr #2696

[jzabala]

The next version of this package won't recognize functions that start with a lower case as components. Your function problem shouldn't report any errors.

[Shags]

Thanks for noting that @jzabala. I would normally use capitalized components names, just missed it here.