Skip to content

Trouble following $Keys when using Flowtype for Props #154

Closed
@djmc

Description

@djmc

Say I have the following component that has a Prop that can only be one of three values from an object.

/* @flow */
import React from 'react';

const CONTENTS = {
    'apple': '🍎',
    'banana': '🍌',
    'orange': '🍊',
};

export type Props = {
    /**
     * The thing that is inside the box.
     */
    innerContents: $Keys<typeof CONTENTS>,
};

/**
 * A box contains one fruit out of many fruit options.
 */
function Box({innerContents}: Props) {
    return (
        <i>{CONTENTS[innerContents]}</i>
    );
}

export default Box;

I'm using $Keys, as described in the Flowtype documentation so that I don't have to redefine the map/"enum" in both JS and Flowtype.

However, after I run react-docgen, it seems to understand $Keys, but doesn't get the valid values for the object.

{
  "description": "A box contains one fruit out of many fruit options.",
  "methods": [],
  "props": {
    "innerContents": {
      "flowType": {
        "name": "$Keys",
        "elements": [
          {
            "name": "unknown"
          }
        ],
        "raw": "$Keys<typeof CONTENTS>"
      },
      "required": true,
      "description": "The thing that is inside the box."
    }
  }
}

It will just return a single element, called "unknown". Looking at this code, this may be intentional, but I'm unsure. I'd expect the elements key to contain an object for apple, banana and orange in the array.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions