DOM re-render without any update in reactjs

Question

export default class setState extends React.Component{
    constructor(){
        super();

        this.state = {
            data:[],`enter code here`
            'header':'this is header'
        }
    }

    updateState(){
        var arr = this.state.data;
        var temp = 'setState... ';
        arr.push(temp);

        this.setState({data:arr});
    }

    render(){
        return(
            <div>
                <h1>Set State</h1>
                <button onClick={this.updateState.bind(this)} >Update State </button>
                <p>{this.state.data}</p>
                <h3>{this.state.header}</h3>
                <h2>Random value : {Math.random()}</h2>
            </div>
        )
    }
}

I don't want to update h2 tag the "Random Value". When i click on the "Update button" i am pushing value in the array and doing "setState". But it also update my h2 tag.

alpha · Accepted Answer · 2016-12-17 04:51:57Z

Putting Math.random function in your render function will cause the value been changed on each render, instead, you can initialise your random value in constructor.

export default class setState extends React.Component{
    constructor(){
        super();

        this.state = {
            data:[],
            'header':'this is header'
        }
        //init random value here
        this.randomValue = Math.random();
    }

    updateState(){
        var arr = this.state.data;
        var temp = 'setState... ';
        arr.push(temp);

        this.setState({data:arr});
    }

    render(){
        return(
            <div>
                <h1>Set State</h1>
                <button onClick={this.updateState.bind(this)} >Update State </button>
                <p>{this.state.data}</p>
                <h3>{this.state.header}</h3>
                <h2>Random value : {this.randomValue}</h2>
            </div>
        )
    }
}

Collectives™ on Stack Overflow

DOM re-render without any update in reactjs

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