How to use the react-scroll.Element function in react-scroll

import React, { Component } from "react";
import PropTypes from "prop-types";
// import SyntaxHighlighter from "react-syntax-highlighter";
import SyntaxHighlighter from "react-syntax-highlighter";
const md5 = require("md5");
var Scroll = require("react-scroll");
var Link = Scroll.Link;
var DirectLink = Scroll.DirectLink;
var Element = Scroll.Element;
var Events = Scroll.Events;
var scroll = Scroll.animateScroll;
var scrollSpy = Scroll.scrollSpy;

import { docco } from "react-syntax-highlighter/styles/hljs";
import { atomDark } from "react-syntax-highlighter/styles/prism";

var log = require("loglevel");
const _ = require("lodash");
import axios from "axios";
let isDev = require("isdev");

console.log("preview isDev:", isDev);

if (isDev) {
  log.setLevel("debug");

import React from 'react';
import _ from 'lodash/fp';
import classNames from 'classnames';
import Scroll from 'react-scroll';
import { scrollToFirstError } from '../../../../platform/utilities/ui';
import { setArrayRecordTouched } from '../helpers';

import {
  toIdSchema,
  getDefaultFormState,
  deepEquals
} from '@department-of-veterans-affairs/react-jsonschema-form/lib/utils';

import { errorSchemaIsValid } from '../validation';

const Element = Scroll.Element;
const scroller = Scroll.scroller;

/* Non-review growable table (array) field */
export default class ArrayField extends React.Component {
  constructor(props) {
    super(props);
    // Throw an error if there’s no viewField (should be React component)
    if (typeof this.props.uiSchema['ui:options'].viewField !== 'function') {
      throw new Error(`No viewField found in uiSchema for ArrayField ${this.props.idSchema.$id}.`);
    }

    /*
     * We’re keeping the editing state in local state because it’s easier to manage and
     * doesn’t need to persist from page to page
     */

sortPrescriptions
} from '../actions/prescriptions';

import {
  openGlossaryModal,
  openRefillModal
} from '../actions/modals';

import Pagination from '@department-of-veterans-affairs/formation/Pagination';
import { getScrollOptions } from '../../../platform/utilities/ui';
import LoadingIndicator from '@department-of-veterans-affairs/formation/LoadingIndicator';

import PrescriptionList from '../components/PrescriptionList';
import PrescriptionTable from '../components/PrescriptionTable';

const ScrollElement = Scroll.Element;
const scroller = Scroll.scroller;

class Active extends React.Component {
  constructor(props) {
    super(props);

    const viewPref = sessionStorage.getItem('rxView');

    this.handleSort = this.handleSort.bind(this);
    this.pushAnalyticsEvent = this.pushAnalyticsEvent.bind(this);
    this.handlePageSelect = this.handlePageSelect.bind(this);
    this.formattedSortParam = this.formattedSortParam.bind(this);
    this.scrollToTop = this.scrollToTop.bind(this);

    this.checkWindowSize = _.debounce(() => {
      const toggleDisplayStyle = window.getComputedStyle(this.viewToggle, null).getPropertyValue('display');

import React from "react";
import Scroll from "react-scroll";
import logo from "./logo.svg";
import i1 from "./images/i1.png";
import i2 from "./images/i2.png";
import i3 from "./images/i3.png";
import p1 from "./images/p1.png";
import p2 from "./images/p2.png";
import JindolDropdown from "./components/JindolDropdown";
import Articles from "./components/Articles";
import "./components/JindolDropdown.css";
import "./App.css";

const Link = Scroll.Link;
const Element = Scroll.Element;

class App extends React.Component {
  render() {
    return (
      <div>
        <div>
          <element name="test1">
            test 1
          </element>

          <element name="test2">
            test 2
          </element>

          <element name="test3">
            test 3</element></div></div>

"use strict";

var React     = require('react');
var ReactDOM  = require('react-dom');
var Scroll    = require('react-scroll');

var Link       = Scroll.Link;
var DirectLink = Scroll.DirectLink;
var Element    = Scroll.Element;
var Events     = Scroll.Events;
var scroll     = Scroll.animateScroll;
var scrollSpy  = Scroll.scrollSpy;

var durationFn = function(deltaTop) {
    return deltaTop;
};

class Section extends React.Component{

  constructor (props){
      super(props);
      this.scrollToTop = this.scrollToTop.bind(this);
  }

  componentDidMount() {

sortPrescriptions
} from '../actions/prescriptions';

import {
  openGlossaryModal,
  openRefillModal
} from '../actions/modals';

import Pagination from '../../common/components/Pagination';
import { getScrollOptions } from '../../common/utils/helpers';
import LoadingIndicator from '../../common/components/LoadingIndicator';

import PrescriptionList from '../components/PrescriptionList';
import PrescriptionTable from '../components/PrescriptionTable';

const ScrollElement = Scroll.Element;
const scroller = Scroll.scroller;

class Active extends React.Component {
  constructor(props) {
    super(props);

    const viewPref = sessionStorage.getItem('rxView');

    this.handleSort = this.handleSort.bind(this);
    this.pushAnalyticsEvent = this.pushAnalyticsEvent.bind(this);
    this.handlePageSelect = this.handlePageSelect.bind(this);
    this.formattedSortParam = this.formattedSortParam.bind(this);
    this.scrollToTop = this.scrollToTop.bind(this);

    this.checkWindowSize = _.debounce(() => {
      const toggleDisplayStyle = window.getComputedStyle(this.viewToggle, null).getPropertyValue('display');

import React, { Component } from 'react';
import Scroll from 'react-scroll';
import Grid from 'react-bootstrap/lib/Grid';

import Header from './instructions/Header.react.js';
import HowItWorks from './instructions/HowItWorks.react.js';
import Footer from './instructions/Footer.react.js';

import Instruction from './instructions/Instruction.react.js';
import Step1 from './instructions/steps/Step1.react.js';
import Step2 from './instructions/steps/Step2.react.js';
import Steps3and4 from './instructions/steps/Step3.react.js';

const Element = Scroll.Element;

export default class TopNav extends Component {
  render() {
    return (
      <div>
        <header>
        
          
          <element name="instructions-start">
            
              
            
          </element>
          
            
          </header></div>

import PropTypes from 'prop-types';
import React from 'react';
import _ from 'lodash/fp';
import classNames from 'classnames';
import Scroll from 'react-scroll';


import {
  toIdSchema,
  getDefaultFormState,
  deepEquals
} from '@department-of-veterans-affairs/react-jsonschema-form/lib/utils';

const Element = Scroll.Element;


class BasicArrayField extends React.Component {
  shouldComponentUpdate = (nextProps, nextState) => {
    return !deepEquals(this.props, nextProps) || nextState !== this.state;
  }

  onItemChange = (indexToChange, value) => {
    const newItems = _.set(indexToChange, value, this.props.formData || []);
    this.props.onChange(newItems);
  }

  getItemSchema = (index) => {
    return this.props.schema.items[index];
  }

import PropTypes from 'prop-types';
import React from 'react';
import Scroll from 'react-scroll';
import _ from 'lodash';

import * as validations from '../utils/validations';
import { getScrollOptions, scrollAndFocus } from '../../../common/utils/helpers';

const Element = Scroll.Element;
const scroller = Scroll.scroller;

/**
 * A component for the review page to validate information is correct.
 * The panel contains one chapter and a list of pages that can be viewed and edited
 * indepepndently.
 *
 * Required props
 * chapter - The chapter title for this panel
 * pages - The array of pages for this chapter. Each pages contains the name and components to render it
 * data - The current form data
 * uiData - The current ui state for each page (i.e. whether each chapter is collapsed or not)
 * onStateChange - Called when form data is changed
 * onFieldsInitialized - Sets all fields to dirty when saving/continuing on page
 * onUpdateEditStatus - toggles editOnReview property that expands/collapses chapter panel
 * urlPrefix - The url prefix for the form pages

"use strict";

var React     = require('react');
var ReactDOM  = require('react-dom');

import * as Scroll from 'react-scroll'

var Link       = Scroll.Link;
var DirectLink = Scroll.DirectLink;
var Element    = Scroll.Element;
var Events     = Scroll.Events;
var scroll     = Scroll.animateScroll;
var scrollSpy  = Scroll.scrollSpy;

var durationFn = function(deltaTop) {
    return deltaTop;
};

class Section extends React.Component{

  constructor (props){
      super(props);
      this.scrollToTop = this.scrollToTop.bind(this);
  }

  componentDidMount() {