Dev Tools UI: Bad readability of props of type function

[Aarbel]

Dev Tools evolved a lot the last months.

Last version doesn't display well functions in props, it leaves an empty field so hard to see if the prop is really passed and if there's really and function passes in the props of the component.

For example i dont' know if the prop onChange really exists as a prop of the component TokenInput.
Don't know also which props are undefined.

Could be also great to use the propTypes to show the types of the props.

[bvaughn]

Can you share the code (not a picture of partial code, but actual runnable code) that reproduces the empty function names like onAdd, onChange, onRemove in your screenshot? Chrome usually does a pretty good job of assigning functions names, and DevTools just displays the name that's assigned by a browser.

[Aarbel]

class LabelsInput extends React.Component {

    onCompletionClick = (completion) => {
        console.log('HELLO')
    }

    onChange = (event) => {
        console.log('HELLO')
    }

    onTokenRemove = (token) => {
        console.log('HELLO')
    }

    onTokenCreationAndAdd = (completion, color) => {
        console.log('HELLO')
    }

    onEditAll = () => {
        console.log('>>> WOHOO onEdit');
    }

    render() {
        const { query } = this.state;
        const { placeholder, labels } = this.props;

        const tokenName = 'Créer le tag';
        const onEditAllText = 'Éditer les tags';

        return ( 
            <TokenInput 
                text={query}
                tokens= {this.tokens}
                completions={this.completions}
                placeholder={placeholder}
                onChange={this.onChange}
                onAdd={this.onCompletionClick}
                onRemove={this.onTokenRemove}
                tokenName={tokenName}
                handlesColor={true}
                onTokenCreationAndAdd={this.onTokenCreationAndAdd}
                onEditAll={this.onEditAll.bind(this)}
                onEditAllText={onEditAllText}
            />
        );
    }
}

[bvaughn]

More succinct, runnable repro:
https://codesandbox.io/s/mystifying-chaplygin-mbmtp

[bvaughn]

Fixed via #17789

Will go out with the next release, probably sometime this week

Before

After

[Aarbel]

Wow very fast, thanks a lot @bvaughn