Child component for StackOverflow question

Child.jsx

import React, { Component } from "react";
import classnames from "classnames";
import PropTypes from "prop-types";
import Slider from "rc-slider/lib/Slider";

import { withApollo } from "react-apollo";
import { withTranslation } from "react-i18next";

import Modal from "../../../components/Modal";
import PrimaryButton from "../../../components/PrimaryButton";

import { GET_STREAM } from "../../../apollo/queries";
import { roundToDecimalPoints } from "../../../helpers/format-utils";

import "rc-slider/assets/index.css";
import "./withdraw-modal.scss";

const initialState = {
  amountToWithdraw: 0,
};

class WithdrawModal extends Component {
  static propTypes = {
    onClose: PropTypes.func.isRequired,
    paid: PropTypes.number.isRequired,
    tokenSymbol: PropTypes.string.isRequired,
    withdrawn: PropTypes.number.isRequired,
  };

  state = { ...initialState };

  componentDidMount() {
    const { client } = this.props;

    try {
      const data = client.readQuery({
        query: GET_STREAM,
        variables: { streamId: "0x574B4756606715Fb35f112ae8283b8a16319c895/0x14" },
      });
      console.log({ data });
    } catch (err) {
      console.log({ err });
    }
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    const amountToWithdraw = prevState.amountToWithdraw || roundToDecimalPoints(nextProps.withdrawable / 2, 2);

    if (amountToWithdraw !== prevState.withdrawable) {
      return { amountToWithdraw };
    } else {
      return prevState;
    }
  }

  onClickWithdraw() {
    this.onClose();
  }

  onClose() {
    this.resetState();
    this.props.onClose();
  }

  resetState() {
    this.setState(initialState);
  }

  render() {
    const { paid, t, tokenSymbol, withdrawable, withdrawn } = this.props;
    const { amountToWithdraw } = this.state;

    const isWithdrawable = withdrawable !== 0;
    const sliderStep = Math.min(withdrawable, 0.01);
    return (
      <Modal onClose={() => this.onClose()}>
        <div className="withdraw-modal">
          <span className="withdraw-modal__title-label">{t("selectAmount")}</span>
          <div className="withdraw-modal__separator" />
          <div className="withdraw-modal__stats-container">
            <div className="withdraw-modal__dashed-line">
              <span className="withdraw-modal__dashed-line-left">{t("withdrawnSoFar")}</span>
              <span className="withdraw-modal__dashed-line-right">
                {withdrawn.toLocaleString()} {tokenSymbol}
              </span>
            </div>
            <div className="withdraw-modal__dashed-line">
              <span className="withdraw-modal__dashed-line-left">{t("earnedSoFar")}</span>
              <span className="withdraw-modal__dashed-line-right">
                {paid.toLocaleString()} {tokenSymbol}
              </span>
            </div>
            <div className="withdraw-modal__dashed-line">
              <span className="withdraw-modal__dashed-line-left">{t("youCanWithdrawUpTo")}</span>
              <span className="withdraw-modal__dashed-line-right">
                {withdrawable.toLocaleString()} {tokenSymbol}
              </span>
            </div>
          </div>
          {!isWithdrawable ? null : (
            <Slider
              className="withdraw-modal__slider"
              defaultValue={amountToWithdraw}
              max={withdrawable}
              min={sliderStep}
              onChange={(value) => this.setState({ amountToWithdraw: value })}
              step={sliderStep}
            />
          )}
          <PrimaryButton
            className={classnames("withdraw-modal__button", {
              "primary-button--disabled": !isWithdrawable,
            })}
            disabled={!isWithdrawable}
            label={`${t("withdraw")} ${amountToWithdraw} ${tokenSymbol}`}
            onClick={() => this.onClickWithdraw()}
          />
        </div>
      </Modal>
    );
  }
}

export default withTranslation()(withApollo(WithdrawModal));