Instance children do not receive style updates about react-inline-transition-group HOT 8 CLOSED

I'm closing this issue because it is fixed in the major version update 2.0.0
@smirea just notice I also changed the API.

from react-inline-transition-group.

Hi @smirea. Is this happening with the version 1.1.0?

from react-inline-transition-group.

yep. it seems react is lazyly replacing the DOM element for subcomponents - which happens before you setAttribute in the 2nd example, and after you setAttribute in the first example

from react-inline-transition-group.

Can you tell me your React version? I tested your code here and worked as expected

from react-inline-transition-group.

"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-inline-transition-group": "^1.1.0",

from react-inline-transition-group.

It is the same as me. I'm not being able to reproduce. Can you, please, submit your code somewhere?

from react-inline-transition-group.

Ok i figured out how to cause the issue. It only happens if a parent component updates on mount (e.g. setState in componentWillMount). The initial state will be invalid but the second the parent updates everything is fixed.

Here is the full code:

import React, {Component} from 'react';
import Transition from 'react-inline-transition-group';

export default class App extends Component {

    state = {};

    handleRef = elem => {
        this.setState({rand: Math.random()})
    }

    render () {
        return (
        <div ref={this.handleRef}>
            <TransitionTest />
        </div>
        );
    }

}

class TransitionTest extends Component {

    state = {
        list: '1234567890'.split(''),
    };

    render () {
        const {list} = this.state;
        const TestClass = (props) => <div {...props} />

        return (
        <div>
            <div onClick={() => this.setState({list: [Math.random()].concat(list)}) }> ++ add ++ </div>
            <Transition
                childrenBaseStyle={{
                    background: 'red',
                }}
            >
                {list.map((val, index) => {
                    const props = {
                        key: val,
                        onClick: () => this.setState({list: list.filter(v => v !== val)}),
                    };
                    return index % 2 === 0 ?
                        <TestClass {...props}>{val}</TestClass> :
                        <div {...props}>{val}</div>
                })}
            </Transition>
        </div>);
    }

}

You should see half the rows red and half white. if you add/remove anything the state becomes valid.

If you remove the setState() from handleRef() the state is also initialized valid

from react-inline-transition-group.

I believe the problem starts with the stateless component you are using.

When I apply the styles I do it manually using the setAttribute(). React stateless components are optimized in some ways that I'm not aware of, but they probably are caching the component definition since it is just a function. And in your definition const TestClass = (props) => <div {...props} /> the styles are not yet present

I found a way to fix this, but I need to be sure of the side effects. In the meantime you can avoid using stateless components.

from react-inline-transition-group.