Show a component after some delay inside return function

Question

I'm trying to render a new component after some delay. My approach was this

if (success) {
    return
    <span className="small_font white_color border padding_5px horiz_center"
        style={{ marginTop: '-5px' }}>Amount changed</span>
    setTimeout(<Retransfer reqUserId={reqUserId} changeAccountLevel={changeAccountLevel} />, 2000);
} else {
    return addFriend;
}

So inside a if statement i'm trying to display

<span className="small_font white_color border padding_5px horiz_center"
                      style={{marginTop: '-5px'}}>Amount changed</span>

part first and after some delay dispay

<Retransfer reqUserId={reqUserId} changeAccountLevel={changeAccountLevel}/>

this component. But my approach does not seem to work.

Can anyone help me with this?

score 1 · Answer 1 · edited Jan 25 '18 at 08:05

What you can do is have a flag in the state that tells whether to show or unshow the Retransfer component . like this

state = {
    isVisibleRetransfer: false,
}
componentDidMount() {
    setTimeout(() => {
        this.setState({
            isVisibleRetransfer: true
        })
    }, 2000)
}

And in your render

if (success) {
    return
    <span className="small_font white_color border padding_5px horiz_center"
        style={{ marginTop: '-5px' }}>Amount changed</span>

    { this.state.isVisibleRetransfer && <Retransfer reqUserId={reqUserId} changeAccountLevel={changeAccountLevel} /> }
} else {
    return addFriend;

}

It's not possible the way you are doing it

Mayank Shukla · Answer 2 · 2018-01-25T07:42:03.147

The way you are trying will not work, because the function of setTimeout will get called after specified time and it will not return anything.

Possible Solution is, use a state value inside Retransfer and render the content after 2sec or you can maintain that state inside parent component also.

Like this:

if (success) {
    return (
        <div>
            <span className="small_font white_color border padding_5px horiz_center"
              style={{marginTop: '-5px'}}>Amount changed
            </span>
            <Retransfer reqUserId={reqUserId} changeAccountLevel={changeAccountLevel}/>
        <div>
    )

} else {
    return addFriend;
}

Inside Retransfer component:

constructor(){
    super();
    this.state = {
        isRenderComp: false,
    }
}

componentDidMount(){
    setTimeout(()=>{
        this.seState({ isRenderComp: true })
    }, 2000);
}

render(){
    if(!this.state.isRenderComp)
        return null;
    return(
        ....
    )
}

Other issues are:

1- Alone return will be treated as return; Automatic Semicolon Insertion, so either use () or put the span in the same line.

2- You are returning 2 elements inside success block, so wrap the content by a div.

score 0 · Answer 3 · answered Jan 25 '18 at 08:29

setTimeout takes two argument, First the function or expression which need to be executed after fixed time passed in second argument.

Thats why it is not working setTimeout

For this to work you can have component which change state of showing Retransfer after fix time.

state = {
    isVisibleRetransfer: false,
}
componentDidMount() {
    setTimeout(() => {
        this.setState({
            isVisibleRetransfer: true
        })
    }, 2000)
}

And in render

if (success) {
    return
    <span className="small_font white_color border padding_5px horiz_center"
        style={{ marginTop: '-5px' }}>Amount changed</span>

    { this.state.isVisibleRetransfer && <Retransfer reqUserId={reqUserId} changeAccountLevel={changeAccountLevel} /> }
} else {
    return addFriend;

}

Show a component after some delay inside return function

3 Answers3