title: Click link to scroll to specific section react.js
body: <p>I have implemented a side menu that has a link tag for each section but I am unsure how to implement the functionality when clicking on them the user is taken to the specific section. I understand how to do it if the it was in the same component and if I was generating the sections in a normal fashion but I am doing it in a different way and I am unsure how to implement something like react-scroll or scrollchor.</p>
  
  <p>Here I am generating the sections with buildTree by mapping over some data I have in another file.</p>
  
  <pre><code>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) =&gt; {
      this.checkboxState = this.checkboxState.setIn([parentLabel, id], checked);
      this.setState({
        checkboxState: this.checkboxState,
      });
    };
  
    mapParents = (counter, child) =&gt; {
      const parentLabel = child.get('label');
      return (
        &lt;li key={child.get('name')} className='field'&gt;
        &lt;SegmentHeader style={segmentStyle} title={child.get('label')} icon={child.get('icon')}&gt;
          &lt;div className='fields' style={zeroMargin}&gt;
            &lt;div className='four wide field'&gt;
              &lt;TreeCheckbox
                label={`Grant ${child.get('label')} Permissions`}
                parentLabel={parentLabel}
                counter={counter}
                onChange={this.treeCheckboxOnChange}
              /&gt;
              {child.get('items') &amp;&amp; this.buildTree(child.get('items'), counter + child.get('name'), parentLabel)}
            &lt;/div&gt;
            &lt;div className='twelve wide field'&gt;
              &lt;GrantDropdown checkboxState={this.state.checkboxState.get(parentLabel, new Map())} label={child.get('label')} childItems={child.get('items')}/&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/SegmentHeader&gt;
      &lt;/li&gt;
      );
    };
  
    mapDataArr = (counter, parentLabel) =&gt; (child) =&gt; (
      (counter === 0) ?
        this.mapParents(counter, child)
        :
        &lt;li key={child.get('name')}&gt;
          &lt;TreeCheckbox label={child.get('label')} parentLabel={parentLabel} onChange={this.treeCheckboxOnChange}/&gt;
          {child.get('items') &amp;&amp; this.buildTree(child.get('items'), counter + child.get('name'), parentLabel)}
        &lt;/li&gt;
    )
  
    buildTree = (dataArr, counter, parentLabel) =&gt; (
      &lt;ul key={counter} style={listStyle}&gt;
        {dataArr.map(this.mapDataArr(counter, parentLabel))}
      &lt;/ul&gt;
    )
  
    render() {
      return (
        &lt;div className='tree-view'&gt;
          {this.buildTree(this.props.data, this.props.counter)}
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>I have used the same technique to map over the data to create my sticky sideNav.</p>
  
  <pre><code>export default class SideNav extends Component {
  
    static propTypes = {
      data: PropTypes.any.isRequired,
      counter: PropTypes.number,
    };
  
    mapPermissionNames = (counter, child) =&gt; (
      &lt;li key={child.get('name')}&gt;
        &lt;Link&gt;{child.get('label')}&lt;/Link&gt;
      &lt;/li&gt;
    )
  
    mapDataArr = (counter) =&gt; (child) =&gt; (
      (counter === 0) ?
        this.mapPermissionNames(counter, child)
        :
        &lt;li key={child.get('name')}&gt;
          &lt;Link&gt;{child.get('label')}&lt;/Link&gt;
        &lt;/li&gt;
    )
  
    buildTree = (dataArr, counter) =&gt; (
      &lt;ul key={counter} style={listStyle}&gt;
        {dataArr.map(this.mapDataArr(counter))}
      &lt;/ul&gt;
    )
  
    render() {
      return (
        &lt;div className='tree-view'&gt;
          {this.buildTree(this.props.data, this.props.counter)}
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>and this is the parent where they both are rendered. </p>
  
  <pre><code>export default class LocationPermissions extends AbstractSettingsComponent {
  
    handlePermissionChange = (e, { value }) =&gt; {
      this.updatePerson('locationPermissions', value);
    }
  
    updateCheckmarks = (id, checked) =&gt; {
      const { currentPerson } = this.props;
      if (checked &amp;&amp; !currentPerson.get('permissions').includes(id)) {
        this.updatePerson('permissions', id, true);
      } else if (!checked &amp;&amp; currentPerson.get('permissions').includes(id)) {
        this.filterItem(['currentPerson', 'permissions'], id, 1);
      }
    }
  
    render() {
      const { currentPerson } = this.props;
      return (
        &lt;div&gt;
          &lt;SegmentHeader icon='building' title='Location Permissions'&gt;
            &lt;div className='two fields' style={zeroMarginBottom}&gt;
              &lt;div className='field'&gt;
                &lt;OptionSelector
                  label={`Grant ${this.getPerson()} permissions for...`}
                  options={this.getPermissionOptions()}
                  value={currentPerson.get('locationPermissions') || 0}
                  onChange={this.handlePermissionChange}
                /&gt;
              &lt;/div&gt;
              {currentPerson.get('locationPermissions') === 2 &amp;&amp;
                &lt;div className='field'&gt;
                  &lt;label&gt;Grant Location Admin Permissions For&lt;/label&gt;
                  &lt;LocationMultiSelect name='Every' {...this.props}/&gt;
                &lt;/div&gt;
              }
            &lt;/div&gt;
          &lt;/SegmentHeader&gt;
          &lt;StickyContainer&gt;
          {currentPerson.get('locationPermissions') === 3 &amp;&amp;
            &lt;div className='fields'&gt;
              &lt;div className='three wide field'&gt;
                &lt;Sticky style={{ paddingTop: '15px' }}&gt;
                  &lt;SideNav
                    data={permissionSections}
                    counter={0}
                  /&gt;
                &lt;/Sticky&gt;
              &lt;/div&gt;
              &lt;div className='twelve wide field'&gt;
              &lt;CheckboxGroup
                data={permissionSections}
                counter={0}
                onChange={this.updateCheckmarks}
              /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          }
          &lt;/StickyContainer&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>I am having trouble understanding how to implement something like react-scroll or scrollchor or react-router link tags to be able to click on the section and scroll to that section on the page. Any suggestions would be very welcome.</p>