"Cannot read property 'startSkipUpdates' of null"

[bryceosterhaus]

I am getting this error for rendering a "Carousel" type of component where the components are nested and conditionally rendered.

I have boiled down the code a bit for an example. Try out the code below and click to add items to see the error

import Component from 'metal-jsx';

class Parent extends Component {
    addItem() {
        this.state.items = [0, ...this.state.items];
    }

    render() {
        return (
            <div onClick={this.addItem.bind(this)}>
                {
                    this.state.items.slice(0, 3).map(
                        (item, i) => <Child item={item} key={item}/>
                    )
                }
            </div>
        );
    }
}

Parent.STATE = {
    items: {
        value: [0, 1, 2, 3]
    }
}

class Child extends Component {
    render() {
        return (
            <Wrapper>
                "test"
            </Wrapper>
        );
    }
}

class GrandChild extends Component {
    render() {
        return (
            <div>
                Foo {Math.random()}
            </div>
        );
    }
}

class Wrapper extends Component {
    render() {
        return (
            <div>
                <GrandChild />

                {this.props.children}
            </div>
        );
    }
}

export default Parent;

[mairatma]

Thanks for the clear repro steps, I also get this error. Will investigate and fix it.

[mairatma]

This has been fixed in release 2.4.3.

Just FYI @bryceosterhaus, even though this example will still work after this fix, it's doing something that is not good for components in general, so I thought it best to let you know in case you have something similar to this in real code and haven't noticed. The problem I'm talking about here is that this code is setting each Child component's key to its item value. When you add a new value to the beginning of the items property you're always adding the value 0. That means that after the first click more than one Child component will receive the same key, with value 0. That's bad for performance, since keys should be unique inside the same parent element, otherwise we won't reuse the child components as well as we could.

And thanks for reporting this!