display:none is not freeing up the space in firefox

Question

I am using react.js for displaying some data. I have more than one divs one below other. and each div contain graph, created from chart.js. I have one button in every div to display or hide that particular chart. It is working nicely. But when I hide that graph, my firefox is still not freeing up the space which was taken by chart when it was getting displayed. Like when I am hiding my chart, the space is getting created between two divs. The code is working properly in Microsoft Edge browser. Here is my code:

var Div= React.createClass({

    getInitialState: function () {
        return {
            displayChart: false
        };
    },

    chartClick: function () {
        this.setState({
            displayChart: !this.state.displayChart,
        });
    },

    render: function() {

        return (
            <div>
                <p className="text-justify">
                    { this.props.detail }
                </p>

                <button type="button" className="btn btn-link" onClick={ this.chartClick }>Chart</button>

                { this.state.displayChart ?
                    <ChartGraph id={this.props.id} />
                : null }
            </div>
        );
    }

});

Chart Component is :

ChartGraph = React.createClass({

    onLoad: function () {
        var barChartData = {
            labels: [ option1, option2 ],
            datasets: [
                {
                    data: [451, 145],
                    fillColor: "rgba(46,145,202,0.8)",
                    strokeColor: "rgba(46,145,202,0.8)",
                    highlightFill: "rgba(46,145,202,1)",
                    highlightStroke: "rgba(46,145,202,1)"
                }
            ]
        };

        var ctx = document.getElementById("canvas_poll"+this.props.id).getContext("2d")
        new Chart(ctx).HorizontalBar(barChartData, {
            scaleGridLineWidth: 1,
            scaleShowGridLines: false,
            scaleStartValue : 0
        });
    },

    componentDidMount: function() {
        this.onLoad();
    },

    render: function () {

        return (
            <div className="red">
                <canvas id={"canvas_poll"+this.props.id} height="100" width="400"></canvas>
            </div>
        );
    }

});

Any help for this problem? Thank you..

Answer 1

This should work.

    var Div= React.createClass({

        getInitialState: function () {
            return {
                displayChart: false
            };
        },

        chartClick: function () {
            this.setState({
                displayChart: !this.state.displayChart,
            });
        },

        render: function() {
            var hideChart = this.state.displayChart ? false : true;
            return (
                <div>
                    <p className="text-justify">
                        { this.props.detail }
                    </p>

                    <button type="button" className="btn btn-link" onClick={ this.chartClick }>Chart</button>

                    <ChartGraph id={this.props.id} hide={hideChart} />
                </div>
            );
        }

    });

and

    ChartGraph = React.createClass({

        onLoad: function () {
            var barChartData = {
                labels: [ option1, option2 ],
                datasets: [
                    {
                        data: [451, 145],
                        fillColor: "rgba(46,145,202,0.8)",
                        strokeColor: "rgba(46,145,202,0.8)",
                        highlightFill: "rgba(46,145,202,1)",
                        highlightStroke: "rgba(46,145,202,1)"
                    }
                ]
            };

            var ctx = document.getElementById("canvas_poll"+this.props.id).getContext("2d")
            new Chart(ctx).HorizontalBar(barChartData, {
                scaleGridLineWidth: 1,
                scaleShowGridLines: false,
                scaleStartValue : 0
            });
        },

        componentDidMount: function() {
            this.onLoad();
        },

        render: function () {
            if (this.props.hide) return null;
            return (
                <div className="red">
                    <canvas id={"canvas_poll"+this.props.id} height="100" width="400"></canvas>
                </div>
            );
        }

    });