React - property `key`. Property not found in props

[karelbilek]

/* @flow */

import React from 'react';
type Props = {
    key: string; 
    foo: number;
}

class Inner extends React.PureComponent {
  props: Props;

  render() {
    return <div>
      {this.props.foo}
    </div>
  }
}

class Outer extends React.PureComponent {
  render() {
    return <div>
        <Inner 
          key={"some string"}
          foo={2}
    	></Inner>
    </div>
  }
}

The error:

10:   props: Props;
             ^ property `key`. Property not found in
22:         <Inner
             ^ props of React element `Inner`

Reproducible on flow.org/try .

"Fixed" by removing key: string from props (flow.org)

[bloodyowl]

key is a special property in React, it shouldn't be accessed from within the component, you can try with another name.

[karelbilek]

Where can I find documentation about what it means/does? [sorry if it's beyond the scope of Flow]

[borela]

https://facebook.github.io/react/docs/lists-and-keys.html

[karelbilek]

👍 thanks, closing

[karelbilek]

Anyway, can I somehow "force" the key property to be used on typecheck? It seems react itself will warn me, but not Flow typechecker.

[kumar303]

Anyway, can I somehow "force" the key property to be used on typecheck? It seems react itself will warn me, but not Flow typechecker.

I think this issue should be re-opened for this reason ^

Console warnings are useless--one typically has to turn them off to get any work done. How do you get Flow to tell you when you've forgotten to define a key property? Requiring a new property named _key and setting key within the component would be pretty lame.

[zeemawn]

I also think the issue should be reopened.

Moving away from componentWillReceiveProps to using the key-prop in order to fully control the component it would make sense to be able to require the key-prop.

See https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key