Cannot read property 'name' of undefined when using decorators

[vladopandzic]

This is my simple render method:

 render() {
    const decorators = {
        Loading: (props) => {
            return (
                <div style={props.style}>
                    loading...
        </div>
            );
        },
        Toggle: (props) => {
            return (
                <div style={props.style}>
                    <svg height={props.height} width={props.width}>
                    // Vector Toggle Here
                    </svg>
                </div>
            );
        },
        Header: (props) => {
            return (
                <div style={props.style}>
                    {props.node.name}
                </div>
            );
        },
        Container: (props) => {

            return (
                <div onClick={this.props.onClick}>

                    <decorators.Toggle />
                    <decorators.Header />
                </div>
            );
        }
    };
    return ( 
   <Treebeard
                        data={this.threeData}
                        decorators={decorators}
                        onToggle={this.onToggle}
                        />

) I defined data in constructor:

constructor(props) {
    super(props);
   
    this.threeData  = {
        name: 'root',
        toggled: true,
        children: [
            {
                name: 'parent',
                children: [
                    { name: 'child1' },
                    { name: 'child2' }
                ]
            },
            {
                name: 'loading parent',
                loading: true,
                children: []
            },
            {
                name: 'parent',
                children: [
                    {
                        name: 'nested parent',
                        children: [
                            { name: 'nested child 1' },
                            { name: 'nested child 2' }
                        ]
                    }
                ]
            }
        ]
    };
}

But I get error: Uncaught TypeError: Cannot read property 'name' of undefined (when exucutes code inside Header method of decorators.

[FilipPlotnicki]

I had a very similar problem. Every time when I had created a custom decorators, props object given to the Header/Toggle etc. function was always empty. For now a quick solution is to import decorators object from the package and extend (or modify if you like it dirty) it.

Something like this works just fine:

import { Treebeard, decorators } from 'react-treebeard';

...

decorators.Toggle = () => (<span />); // no toggle
decorators.Header = (props) => (<div>{props.node.label}</div>); // display label instead of name

...

<Treebeard data={someData} decorators={decorators} onToggle={this.onToggle} />