My code cannot update nested component

Question

I try React and react-typist.

I have some problem. Then I pass a closure that change the state, to "onTypingDone" and called it, but not working correctly. I think that because Typist may not re-render inner components. For example, the following code. The following code does not work well.

How can I works correctly?

import * as React from 'react';
import Typist from 'react-typist';

export interface Props {}
export interface State {
    className: string
}

export MyComponents extends React.Component<Props, State> {
    constructor(props: Props)
    {
        super(props);
        this.state = { className: "before" };
    }

    switch() {
        this.setState({ className: "after" });
    }

    render()
    {
        <Typist onTypingDone={this.switch.bind(this)}>
            <div className={this.state.className}>
                <p>Hello.</p>
            </div>
        </Typist>
    }
}

oh sorry it is mistype.

Yusuke Mori
– Yusuke Mori

2017-10-30 17:20:36 +00:00
Commented Oct 30, 2017 at 17:20 — Yusuke Mori
– Yusuke Mori, Commented Oct 30, 2017 at 17:20

Vivek Doshi · Accepted Answer · 2017-10-31 03:59:34Z

As I dive into the code found the real issue, Typist is stopping the re-render,

this.state.className is pointing to the MyComponents, But content within Typist is not re-rendering, Reason is shouldComponentUpdate function inside Typist component

shouldComponentUpdate(nextProps, nextState) {
    if (nextState.textLines.length !== this.state.textLines.length) {
        return true;
    }
    for (let idx = 0; idx < nextState.textLines.length; idx++) {
        const line = this.state.textLines[idx];
        const nextLine = nextState.textLines[idx];
            if (line !== nextLine) {
                return true;
            }
    }
    return this.state.isDone !== nextState.isDone;
}

shouldComponentUpdate :

render() will not be invoked if shouldComponentUpdate() returns false.

You can achieve the solution by this way :

<div className={this.state.className}>
    <Typist onTypingDone={this.switch.bind(this)}>
            <p>Hello.</p>
    </Typist>
</div>

Collectives™ on Stack Overflow

My code cannot update nested component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related