Skip to content

DevTools: Improve props/state value editing interface #16476

@bvaughn

Description

@bvaughn

Follow up to a discussion thread on #294 and a Messenger chat with @gaearon.

The current UI for editing props/state/hooks values has a couple of shortcomings:

  • strings/numeric values are sometimes of an unclear type. (DevTools uses the correct <input type> but this is subtle. Showing e.g. quotation marks around strings could be more helpful.
  • null initial values can only become strings at the moment. (DevTools does not attempt to parse numeric or boolean values and change the input type. If it did, we would probably also need to enable a way for you to opt back out of that input type somehow in case it was incorrect.)
  • fields that maybe support multiple types (e.g. string | number) are locked into a single type (whichever type they happen to be initially).

Additional quirks that might be worth ironing out:

  • Non-editable strings are currently wrapped in quotation marks but editable ones aren't.

Originally reported via bvaughn/react-devtools-experimental#321

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