I have a component that renders react D3 graph. And I have a switch that displays graph1 when its ON and displays graph2 when its OFF.

Basically there was react conditional rendering based on one variable state.

Issue is: graph1 is appearing differently. When component loads first time, it looks different. When switch is OFF(graph2) and then again ON(graph1), now it looks different.

Code:

    handleChange = function() {
    if(this.state.nwtb) {
        // this.setState({data: swtb_data, nwtb: false});
        this.setState({nwtb: false});
    } else {
        // this.setState({data: nwtb_data, nwtb: true});
        this.setState({nwtb: true});
    }
};

render() {
  return (
    <div>
        <div>
            <Switch onChange={this.handleChange.bind(this)} checked={this.state.nwtb} />
        </div>
        <div>
            {this.state.nwtb ? <Graph id="graph" 
                config={this.config} 
                data={this.data} 
                onClickGraph={this.onClickGraph}
                onClickNode={this.onClickNode}
                onDoubleClickNode={this.onDoubleClickNode}
                onRightClickNode={this.onRightClickNode}
                onClickLink={this.onClickLink}
                onRightClickLink={this.onRightClickLink}
                onMouseOverNode={this.onMouseOverNode}
                onMouseOutNode={this.onMouseOutNode}
                onMouseOverLink={this.onMouseOverLink}
                onMouseOutLink={this.onMouseOutLink}
                onNodePositionChange={this.onNodePositionChange}
                onZoomChange={this.onZoomChange} /> 
            : <Graph id="graph" 
                config={this.config} 
                data={this.nwtb_data} 
                onClickGraph={this.onClickGraph}
                onClickNode={this.onClickNode}
                onDoubleClickNode={this.onDoubleClickNode}
                onRightClickNode={this.onRightClickNode}
                onClickLink={this.onClickLink}
                onRightClickLink={this.onRightClickLink}
                onMouseOverNode={this.onMouseOverNode}
                onMouseOutNode={this.onMouseOutNode}
                onMouseOverLink={this.onMouseOverLink}
                onMouseOutLink={this.onMouseOutLink}
                onNodePositionChange={this.onNodePositionChange}
                onZoomChange={this.onZoomChange} />
            }