Ищете более элегантный способ написать несколько компонентов, используя похожие функции

У меня есть этот компонент, который отображает данные, но также должен сохранять и управлять состоянием. У меня есть 5 других компонентов, которые точно такие же, за исключением небольших нюансов внутри их функций. Мне нужна помощь в поиске более элегантного способа написать этот код, а не иметь 6 более или менее одинаковых файлов.

Я попытался понять и использовать HOC для этого экземпляра, но каждый компонент имеет свой собственный вызов отправки, который требует данных, специфичных для этого компонента. Итак, я не могу найти способ заставить работать HOC.

Это мои функции:

  componentDidMount () {
    setTimeout(() => {
      this.setState({ baseForm: this.props.baseData })
      this.getDisable()
      this.setState({ loading: false })
    }, 2000)
  }

  handleSwitch = item => event => {
    this.setState({ [item]: event.target.checked })
  }

  handlePRESubmit () {
    const array = this.state.baseForm
    array.forEach(item => {
      item.isTemplate = false
      item.mark = this.state.mark
      item.isVisible = this.state.visible
      item.genesisId = item._id
    })
  }

  handleSubmit = () => {
    this.handlePRESubmit()
    let formData = this.state.baseForm[0]
    fetch(APIURL, {
      method: 'POST',
      body: JSON.stringify(formData),
    }).then(response => {
      response.json().then(data => {
        let orgId = localStorage.getItem('orgId')
        let sku = { skuId: data.data._id, type: 'verification' }
        fetch(APIURL, {})
          .then(response => response.json())
          .then(data => {})
      })
    })
  }

  toggleDisabled () {
    if (this.state.assigned !== undefined) {
      this.setState({ disabled: !this.state.disabled })
    }
  }

  getDisable () {
    setTimeout(() => {
      const result = this.props.assignedSku.find(e => e.name === 'Base')
      this.setState({ assigned: result })
      if (this.state.assigned !== undefined) {
        this.setState({ mark: true })
        this.setState({ visible: true })
      }
    }, 1000)
  }

  handleMenu = event => {
    this.setState({ anchorEl: event.currentTarget })
  }

  handleClose = () => {
    this.setState({ anchorEl: null })
  }

А это моя карта

        <Card id='partner-sku-card'>
          <CardHeader
            title = {base.name}
            subheader = {'$' + ' ' + base.price}
            action = {
              <div>
                <IconButton onClick = {this.handleMenu}/>
              </div>
            }
          />
          <Menu
            anchorEl = {anchorEl}
            open = {Boolean(anchorEl)}
            onClose = {this.handleClose}
          >
            <MenuItem disabled = {this.state.disabled ? 'disabled' : ''}>
              Edit
            </MenuItem>
          </Menu>
          <CardActions>
            <FormControlLabel
              control = {
                <Switch
                  checked = {this.state.mark}
                  onChange = {this.handleSwitch('mark')}
                  value='mark'
                />
              }
            />
            <FormControlLabel
              control = {
                <Switch
                  checked = {this.state.visible}
                  onChange = {this.handleSwitch('visible')}
                  value='visible'
                />
              }
            />
            <Button onClick = {this.handleSubmit}>
              Submit
            </Button>
          </CardActions>
        </Card>

Опять же, весь этот код снова пишется в 5 других файлах. Мне нужен элегантный способ заменить слово «база» / «база» во всех аспектах этого. Допустим, у меня есть Base, Mid, Top. Мне нужно, чтобы все эти функции работали для всех 3 и по-прежнему производили одну и ту же карту в конце. Спасибо за помощь!