How to update DOM after on axios return React JS and Laravel

I want to update my entire dashboard when select date as like as the attached image

After select the date the entire page info will be updated. I am using React JS and axios to pick the date and Laravel to process the result and returning all arrays. But I am unsure how to embed the return results in the view (Blade).

Dashboard Blade:

<div class="container">
    <div class="row">
        <div class="col-lg-12 mb-4">
            <div class="row">
                <div class="col-lg-4 ml-auto" id='select-date'>
                </div>
            </div>
        </div>
    </div>
    <div id='dashboard-content'>
        .....
    </div>
</div>

Select Date:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

export default class SelectDate extends Component {

    constructor() {
        super();
        this.state = {
            value: ''
        }
    }

    selectDate(e) {
        let url = window.location.href
        let date = e.target.value
        this.setState({value: date})
        axios.get(url+ '/' +date).then(response => {
            alert(response.data)
            document.getElementById('dashboard_content').innerHTML = response.data
        }).catch(error => {
            alert(error)
        })
    }

    render() {
        return (
            <div>
                <select className="custom-select custom-select-sm" onChange={this.selectDate.bind(this)} value={this.state.value}>
                    <option selected value='7'>Last Week</option>
                    <option value="1">Today</option>
                    <option value="30">Last Month</option>
                </select>
            </div>
        );
    }
}

if (document.getElementById('select-date')) {
    ReactDOM.render(<SelectDate />, document.getElementById('select-date'));
}

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/38bF7c8
via IFTTT