javascript - Click link to scroll to specific section react.js -

i have implemented side menu has link tag each section unsure how implement functionality when clicking on them user taken specific section. understand how if in same component , if generating sections in normal fashion doing in different way , unsure how implement react-scroll or scrollchor.

here generating sections buildtree mapping on data have in file.

export default class checkboxgroup extends purecomponent {    constructor(props) {      super(props);      this.checkboxstate = new map();      this.state = {        checkboxstate: new map(),      };    }      static proptypes = {      data: proptypes.any.isrequired,      onchange: proptypes.func.isrequired,      counter: proptypes.number,    };      treecheckboxonchange = (parentlabel, id, checked) => {      this.checkboxstate = this.checkboxstate.setin([parentlabel, id], checked);      this.setstate({        checkboxstate: this.checkboxstate,      });    };      mapparents = (counter, child) => {      const parentlabel = child.get('label');      return (        <li key={child.get('name')} classname='field'>        <segmentheader style={segmentstyle} title={child.get('label')} icon={child.get('icon')}>          <div classname='fields' style={zeromargin}>            <div classname='four wide field'>              <treecheckbox                label={`grant ${child.get('label')} permissions`}                parentlabel={parentlabel}                counter={counter}                onchange={this.treecheckboxonchange}              />              {child.get('items') && this.buildtree(child.get('items'), counter + child.get('name'), parentlabel)}            </div>            <div classname='twelve wide field'>              <grantdropdown checkboxstate={this.state.checkboxstate.get(parentlabel, new map())} label={child.get('label')} childitems={child.get('items')}/>            </div>          </div>        </segmentheader>      </li>      );    };      mapdataarr = (counter, parentlabel) => (child) => (      (counter === 0) ?        this.mapparents(counter, child)        :        <li key={child.get('name')}>          <treecheckbox label={child.get('label')} parentlabel={parentlabel} onchange={this.treecheckboxonchange}/>          {child.get('items') && this.buildtree(child.get('items'), counter + child.get('name'), parentlabel)}        </li>    )      buildtree = (dataarr, counter, parentlabel) => (      <ul key={counter} style={liststyle}>        {dataarr.map(this.mapdataarr(counter, parentlabel))}      </ul>    )      render() {      return (        <div classname='tree-view'>          {this.buildtree(this.props.data, this.props.counter)}        </div>      );    }  }

i have used same technique map on data create sticky sidenav.

export default class sidenav extends component {      static proptypes = {      data: proptypes.any.isrequired,      counter: proptypes.number,    };      mappermissionnames = (counter, child) => (      <li key={child.get('name')}>        <link>{child.get('label')}</link>      </li>    )      mapdataarr = (counter) => (child) => (      (counter === 0) ?        this.mappermissionnames(counter, child)        :        <li key={child.get('name')}>          <link>{child.get('label')}</link>        </li>    )      buildtree = (dataarr, counter) => (      <ul key={counter} style={liststyle}>        {dataarr.map(this.mapdataarr(counter))}      </ul>    )      render() {      return (        <div classname='tree-view'>          {this.buildtree(this.props.data, this.props.counter)}        </div>      );    }  }

and parent both rendered.

export default class locationpermissions extends abstractsettingscomponent {      handlepermissionchange = (e, { value }) => {      this.updateperson('locationpermissions', value);    }      updatecheckmarks = (id, checked) => {      const { currentperson } = this.props;      if (checked && !currentperson.get('permissions').includes(id)) {        this.updateperson('permissions', id, true);      } else if (!checked && currentperson.get('permissions').includes(id)) {        this.filteritem(['currentperson', 'permissions'], id, 1);      }    }      render() {      const { currentperson } = this.props;      return (        <div>          <segmentheader icon='building' title='location permissions'>            <div classname='two fields' style={zeromarginbottom}>              <div classname='field'>                <optionselector                  label={`grant ${this.getperson()} permissions for...`}                  options={this.getpermissionoptions()}                  value={currentperson.get('locationpermissions') || 0}                  onchange={this.handlepermissionchange}                />              </div>              {currentperson.get('locationpermissions') === 2 &&                <div classname='field'>                  <label>grant location admin permissions for</label>                  <locationmultiselect name='every' {...this.props}/>                </div>              }            </div>          </segmentheader>          <stickycontainer>          {currentperson.get('locationpermissions') === 3 &&            <div classname='fields'>              <div classname='three wide field'>                <sticky style={{ paddingtop: '15px' }}>                  <sidenav                    data={permissionsections}                    counter={0}                  />                </sticky>              </div>              <div classname='twelve wide field'>              <checkboxgroup                data={permissionsections}                counter={0}                onchange={this.updatecheckmarks}              />            </div>          </div>          }          </stickycontainer>        </div>      );    }  }

i having trouble understanding how implement react-scroll or scrollchor or react-router link tags able click on section , scroll section on page. suggestions welcome.

i able use browser supported way doing:

<a href={`#${child.get('label')}`}>{child.get('label')}</a>

and add id list element.