Q:

React this.state.dataSource.map is not a function

I am getting a error on my app.js suddenly. 
I'm new to React and am not really sure what to do with this 
I am trying to create a CRUD app here 
It was working correctly but stopped and is reapeatedly throwing this error
TypeError: this.state.dataSource.map is not a function
App.render
C:/Users/dksmi/beer-list/src/App.js:62
  59 | <div className="App">
  60 | <h1>What's in My Fridge?</h1>
  61 | 
> 62 | <AddItem
     | ^  63 |   onAdd={this.onAdd}
  64 | />
  65 | 

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.onDelete = this.onDelete.bind(this);
  }

  componentWillMount() {
    const dataSource = this.getDataSource();

    this.setState({dataSource});
  }

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

onAdd( name, likes) {
  const dataSource = this.getDataSource();

  dataSource.push({
    name,
    likes
  });
  this.setState({dataSource});
}

onDelete(name) {
  const dataSource = this.dataSource();

  const filteredDataSource = dataSource.filter(dataSource => {
    return dataSource.name !== name;

  });
  this.setState({ dataSource: filteredDataSource});
}

  render() {
    var {isLoaded, dataSource} = this.state;
    return (
      <div className="App">
      <h1>What's in My Fridge?</h1>

      <AddItem
        onAdd={this.onAdd}
      />

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

      </div>
    );
  }
}

export default App;

A:

This is incorrect:
getDataSource() {
  return fetch('https://beer.fluentcloud.com/v1/beer')
    .then(response => response.json())
    .then(responseJson => {
      this.setState({
        isLoaded: true,
        dataSource: responseJson,
      });
    })
    .catch(error => console.log(error)); //to catch the errors if any
}

onAdd( name, likes) {
  const dataSource = this.getDataSource();

  dataSource.push({
    name,
    likes
  });
  this.setState({dataSource});
}

Your getDataSource function does not return the JSON as you seem to be expecting. you could possibly change the code to
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.log(error)); //to catch the errors if any
}

in order to return a promise for the JSON, and then use it like
  const dataSource = this.getDataSource();
  dataSource.then(json => {
    json.push({
      name,
      likes
    });
    this.setState({dataSource: json});
  });

