TypeError: this.getdataSource не является функцией

Я пытаюсь разрешить РЕДАКЦИЮ в моем списке данных API. Это позволяет мне редактировать запись списка, однако, когда я отправляю издание, я получаю сообщение об ошибке, что

   `this.getDataSource();`

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

Кроме того, если бы у кого-то был совет или руководство о том, как сделать это полностью работающим приложением CRUD, которое позволяет отправлять новые записи POST обратно в API, а также позволяет помещать выпуски обратно в этот API, это было бы здорово . Я не уверен, должен ли я изменить свой запрос на выборку или я полностью ошибаюсь.

Любая помощь будет оценена!!!

My App.js code-

import React, { Component } from 'react';
import './App.css';
import AddItem from './AddItem';
import SingleItem from './singleItem';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      dataSource: [],
      isLoaded: false,
    }
    this.onAdd = this.onAdd.bind(this);
    this.onEditSubmit = this.onEditSubmit.bind(this);
  }

  componentDidMount() {
    this.getDataSource();

  }

  getDataSource() {
    return fetch('https://beer.fluentcloud.com/v1/beer')
      .then(response => response.json())
      .then(responseJson => {
        this.setState({
          isLoaded: true,
          dataSource: responseJson,
        });
        return responseJson;
      })
      .catch(error => console.info(error)); //to catch the errors if any
  }
onAdd( name, likes) {
  const dataSource = this.getDataSource();
    dataSource.then(json => {
      json.push({
        name,
        likes
      });
      this.setState({dataSource: json});
    });
}


onEditSubmit (name, likes, originalName) {
    let dataSource = this.getdataSource();

    dataSource = dataSource.map((dataSource) => {
      if (dataSource.name === originalName) {
        dataSource.name = name;
        dataSource.likes = likes;
      }
      return dataSource;
    });
    this.setState({dataSource});
}

  render() {

    return (
      <div className = "App">
      <h1>What is in My Fridge?</h1>

      <AddItem
        onAdd = {this.onAdd}
      />

          {this.state.dataSource.map((dataSource) => (
            <SingleItem
              key = {dataSource.name}
              name = {dataSource.name}
              likes = {dataSource.likes}
              onEditSubmit = {this.onEditSubmit}
            />
          ))};




      </div>
    );
  }
}

export default App;

мой код компонента AddItem.js-

import React, { Component } from 'react';
import './App.css';

class AddItem extends Component {
  constructor(props) {
    super(props);

    this.onSubmit = this.onSubmit.bind(this);
  }

  onSubmit(event) {
    event.preventDefault();

    this.props.onAdd(this.nameInput.value, this.likesInput.value);
    this.nameInput.value = '';
    this.likesInput.value = '';
  }

  render() {
    return (
      <form onSubmit = {this.onSubmit}>
      <h3>Add Beer</h3>
        <input placeholder = "Name" ref = {nameInput => this.nameInput = nameInput} />
        <input placeholder = "Likes" ref = {likesInput => this.likesInput = likesInput}/>
        <button>Add</button>
        <hr />
      </form>
    );
  }
}

export default AddItem;

мой код singleItem.js -

import React, { Component } from 'react';
import './App.css';


class SingleItem extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isEdit: false
    };


    this.onEdit = this.onEdit.bind(this);
    this.onEditSubmit = this.onEditSubmit.bind(this);
  }


  onEdit() {
    this.setState({ isEdit: true });
  }

  onEditSubmit(event) {
    event.preventDefault();

    this.props.onEditSubmit(this.nameInput.value, this.likesInput.value, this.props.name);
    this.setState({ isEdit: false });

  }

  render() {
    const { name, likes } = this.props;
    return (
      <div>
        {
          this.state.isEdit
            ? (
              <form onSubmit = {this.onEditSubmit}>
              <input placeholder = "Name" ref = {nameInput => this.nameInput = nameInput} defaultValue = {name}/>
              <input placeholder = "Likes" ref = {likesInput => this.likesInput = likesInput} defaultValue = {likes}/>
              <button>Save</button>
                </form>
            )
            :   (
              <div>
      <li>
        {name} | Likes:  {likes}
      </li>
      <button onClick = {this.onEdit}>Edit</button>

       </div>
)
}
      </div>
    );
  }
}

export default SingleItem;