'columnLinks' is missing in props validation

Question

I have looked up this issue and so far is seems that most of these error are caused by typos, but I'm pretty sure I don't have one. With this code:

const Component = (props: Props): ReactElement => {
  const createColumnData = (): ColumnProps<TableDataPoint>[] => Object.keys(
    props.dataSource[0],
  )
    .map((key, _, arr) => ({
      title: key.replace(/([A-Z])/g, ' $1').replace(/^./, (str) => str.toUpperCase()),
      dataIndex: key,
      width: `${100 / Math.floor(arr.length)}%`,
      render: props.columnLinks[key]
        ? ((text): ReactElement => <a href={props.columnLinks[key]}>{text}</a>) // error is in columnLinks here
        : undefined,
    }));

I get the error 'columnLinks' is missing in props validation and I'm not sure why. Has it got to do with passing JS in to an href?

Also I am aware that there is no point in using a ternary operator with one branch returning undefined, but TypeScript is throwing an error when I use && in this situation.

it sounds like that is a linter error and not a react/typescript error, in that case, even though it is annoying it has no bearing on the outcome of the code and might just be some pedantic configuration — Oscar Franco, Feb 03 '20 at 15:50
Confirmed linting error from github: https://github.com/yannickcr/eslint-plugin-react/issues/2353 — Sterling Archer, Feb 03 '20 at 15:51

score 0 · Answer 1 · answered Feb 03 '20 at 16:06

Are you trying to find out why it's happening, or are you after a solution? As you said, you don't need the ternary; Regardless, it seems to be a linting error with TypeScript's handling of inferred typing on arrow functions.

If you need the error to go away while preserving the ternary, you could specifically type columnLinks instead of letting TS infer it, or change the arrow function out. Depending on how the component is written outside of this block, you might find this thread useful for defining propTypes!

Alternatively, why not just be rid of the ternary if you know that you don't need it?

Thanks for your answer - `columnLinks` prop is passed down in an object that uses this interface: `[key: string]: string;` so I have typed the object that is passed as a prop. Changing the Arrow function out doesn't seem to to fix the issue for me. — Mr. Robot, Feb 03 '20 at 16:17

'columnLinks' is missing in props validation

1 Answers1