Как создать функцию кнопки для прокрутки определенного div с помощью ReactJS

Question

Я хочу создать кнопку для прокрутки определенного div.

Мой файл:

import React, {Component} from 'react';
import Panel from 'react-bootstrap/lib/Panel'
import Button from 'react-bootstrap/lib/Button'
import CustomerDetails from './CustomerDetails'
import axios from 'axios'

export default class Customers extends Component {

  constructor(props) {
    super(props)
    this.state = {
      selectedCustomer: 1
    }
  }

  //function which is called the first time the component loads
  componentDidMount() {
    this.getCustomerData();
  }

  //Function to get the Customer Data from json
  getCustomerData() {
    axios.get('assets/samplejson/customerlist.json').then(response => {
      this.setState({customerList: response})
    })
  };

  render() {
    if (!this.state.customerList)
      return (<p>Loading data</p>)
    return (<div className="addmargin">

      <div className="col-md-3">
        {
          this.state.customerList.data.map(customer => <Panel bsStyle="info" key={customer.name} className="centeralign">
            <Panel.Heading>
              <Panel.Title componentClass="h3"><b>{customer.name}</b></Panel.Title>
            </Panel.Heading>
            <Panel.Body>
              <p>{customer.information}</p>
              <p>{customer.fullkitcctv}</p>
              <p>{customer.additionalInfo}</p>
              <Button bsStyle="info" onClick={() => this.setState({selectedCustomer: customer.id})}>

                Вижте за подробности

              </Button>
              <p>За да видите съдържанието, отидете най-долу в сайта</p>
            </Panel.Body>
          </Panel>)
        }
      </div>
      <div className="col-md-6">
        <CustomerDetails val={this.state.selectedCustomer}/>
      </div>
    </div>)
  }

}

Второй файл содержит информацию о содержимом

Файл:

import React, { Component } from 'react';
import Panel from 'react-bootstrap/lib/Panel'
import axios from 'axios'

//This Component is a child Component of Customers Component
export default class CustomerDetails extends Component {

  constructor(props) {
    super(props);
    this.state = {}
  }

  //Function which is called when the component loads for the first time
  componentDidMount() {
    this.getCustomerDetails(this.props.val)
  }

  //Function which is called whenver the component is updated
  componentDidUpdate(prevProps) {

    //get Customer Details only if props has changed
    if (this.props.val !== prevProps.val) {
      this.getCustomerDetails(this.props.val)
    }
  }

  //Function to Load the customerdetails data from json.
  getCustomerDetails(id) {
    axios.get('assets/samplejson/customer' + id +'.json').then(response => {
      this.setState({ customerDetails: response })
    })
  };

  render() {
    if (!this.state.customerDetails)
      return (<p>Loading Data</p>)
    return (<div className="customerdetails">
      <Panel bsStyle="info" className="centeralign">
        <Panel.Heading>
          <Panel.Title componentClass="h3"><b>{this.state.customerDetails.data.name}</b></Panel.Title>
        </Panel.Heading>
        <Panel.Body>      
        <p><b>{this.state.customerDetails.data.hdtvicctv1mpx}</b></p>
        </Panel.Body>
      </Panel>  
    </div>)
  }
}

Итак, в первом файле есть кнопка, но когда пользователи нажимают на кнопку, я хочу прокрутить панель во втором файле. Я не знаю, что делать ... Могу я привести пример того, как создать функцию для прокрутки к выбранному div.

Каждый раз, когда я вижу эту сеть из своего Iphone, мне нужно прокрутить вниз, чтобы увидеть содержимое информация с кнопки.