Example of a stateful component

component.js

class NavigationBar extends React.Component {
  state = {
    scroll: window.pageYOffset,
    navContainer: null,
    active: false,
  };

  componentDidMount() {
    this.setState({
      navContainer: document.getElementById('NavContainer').offsetTop,
      active: 'description',
    });

    window.addEventListener('scroll', this.handleScrollEvent);
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScrollEvent);
  }

  setActive = props => {
    const { item, yValue } = props;

    this.setState({
      active: item,
    });

    window.scrollTo({
      top: yValue - 67,
      behavior: 'smooth',
    });
  };

  handleScrollEvent = () => {
    const { scroll, active, navContainer } = this.state;
    const isFixed = scroll >= navContainer;
    const yValues = [];

    this.setState({
      scroll: window.pageYOffset,
    });

    pageAnchors.map(item => {
      const elId = document.getElementById(`${item}`);
      yValues.push(elId.offsetTop - 72);
    });

    yValues.forEach((item, index) => {
      if (scroll >= item && (index + 1 === yValues.length || scroll <= yValues[index + 1])) {
        this.setState({
          active: pageAnchors[index],
        });
      }
    });

    if (isFixed && window.innerWidth <= SIZE_TABLET) {
      const activeEl = document.getElementById(`nav${active}`);
      if (activeEl.offsetLeft > window.innerWidth) {
        activeEl.scrollIntoView({ behavior: 'instant', inline: 'end' });
      } else if (activeEl.offsetLeft < window.innerWidth) {
        activeEl.scrollIntoView({ behavior: 'instant', inline: 'end' });
      }
    }
  };

  toTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth',
    });
  };

  render() {
    const { scroll, navContainer } = this.state;
    const isFixed = scroll >= navContainer;

    return (
      <NavContainer id="NavContainer">
        <NavWrapper isFixed={isFixed}>
          {pageAnchors.map(item => {
            const elId = document.getElementById(`${item}`);
            const yValue = elId && elId.offsetTop;
            return (
              <MenuItem
                key={uniqId()}
                name={item}
                id={`nav${item}`}
                isActive={this.state.active === item}
                setActive={() => {
                  this.setActive({ item, yValue });
                }}
              />
            );
          })}
        </NavWrapper>
        <ToTop onClick={this.toTop} isFixed={isFixed}>
          <Icon name="up" size="large" />
        </ToTop>
      </NavContainer>
    );
  }
}

const mapStateToProps = ({ i18n }) => {
  return { locale: i18n.locale };
};

export default connect(mapStateToProps)(NavigationBar);