I have one component in which I have one button and I am calling one node js service on that. I am getting a response back from that service and I want to pass that response on next component to display a data there. Below is my component which is doing a node js call. 

```
import { FormGroup } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.css";
import axios from "axios";

export default class Abc extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: {}
        }
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick = (e) => {
        e.preventDefault();
        axios.get(url)
            .then(res => {
                this.setState({
                    data: res.data// I need this variable to pass to next component Pqr where I can use it for display purpose.
                })
                this.props.history.push("/Pqr",{ response:res.data});
            })
    };

    render() {

        return (
            <form >
                <button className="btn btn-info btn-sm" onClick={this.handleClick} style={{ whitespace: 'nowrap' }} >
                    Launch
                    </button>
            </form>
        )

    }
}

My Pqr component code is as below.

import React from "react";

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

        this.state = {
        }
    }
    render() {
        const state = this.props.location.state
        return (
        <h1>This page will display model Inputs : {state} </h1>
        )
    }
}

```