Undefined API React

import React, { Component } from 'react';
import axios from 'axios';
 
export default class Create extends Component {
  constructor(props) {
    super(props);
    this.onChangeName = this.onChangeName.bind(this);
    this.onChangeSurname = this.onChangeSurname.bind(this);
    this.onChangeNumber = this.onChangeNumber.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
 
    this.state = {
      name: '',
      surname: '',
      number:''
    };
  }
  onChangeName(e) {
    this.setState({
      name: e.target.value
    });
  }
  onChangeSurname(e) {
    this.setState({ 
      surname: e.target.value
    });
  }
  onChangeNumber(e) {
    this.setState({
      number: e.target.value
    });
  }
 
  onSubmit(e) {
    e.preventDefault();
    const data = {
      name: this.state.name,
      surname: this.state.surname,
      number: this.state.number
    };
 
    axios.put('http://178.128.196.163:3000/api/records/', data)
        .then(res => console.log(res.data));
    
    this.setState({
      name: '',
      surname: '',
      number: ''
    })
  }
 
  render() {
    return (
        <div> 
            <form onSubmit={this.onSubmit}>
                <div className="form-group">
                    <label>Имя:  </label>
                    <input 
                      type="text" 
                      className="form-control" 
                      value={this.state.name}
                      onChange={this.onChangeName}
                      />
                </div>
                <div className="form-group">
                    <label>Фамилия: </label>
                    <input 
                      type="text" 
                      className="form-control"
                      value={this.state.surname}
                      onChange={this.onChangeSurname}
                      />
                </div>
                <div className="form-group">
                    <label>Номер: </label>
                    <input 
                      type="text"   
                      className="form-control"
                      value={this.state.number}
                      onChange={this.onChangeNumber}
                      />
                </div>
                <div className="form-group">
                    <input type="submit" value="Добавить" className="btn btn-primary"/>
                </div>
            </form>
        </div>
    )
  }
}

import React, { Component } from 'react';
import axios from 'axios';
import TableRow from './TableRow';
 
export default class Index extends Component {
 
  constructor(props) {
      super(props);
      this.state = {database: []};
    }
    componentDidMount(){
      axios.get('http://178.128.196.163:3000/api/records')  
        .then(response => {
          this.setState({ database: response.data});
        })
        .catch(function (error) {
          console.log(error);
        })
    }
    
    tabRow(){
      return this.state.database.map(function(object, i){
          return <TableRow obj={object} key={i} />;
      });
    }
 
    render() {
      return (
        <div>
          <h3>Список</h3>
          <table className="table table-striped">
            <thead>
              <tr>
                <th>Имя</th>
                <th>Фамилия</th>
                <th>Номер</th>
                <th colSpan="2">Доступные действия </th>
              </tr>
            </thead>
            <tbody>
              { this.tabRow() }
            </tbody>
          </table>
        </div>
      );
    }
  }

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';
 
class TableRow extends Component {
 
  constructor(props) {
        super(props);
        this.delete = this.delete.bind(this);
    }
    delete() {
        axios.delete('http://178.128.196.163:3000/api/records/'+this.props.obj._id)
            .then(console.log('Deleted'))
            .catch(err => console.log(err))
    }
  render() {
    return (
        <tr>
          <td>
            {this.props.obj.name}
          </td>
          <td>
            {this.props.obj.surname}
          </td>
          <td>
            {this.props.obj.number}
          </td>
          <td>
            <Link to={"/edit/"+this.props.obj._id} className="btn btn-primary">Edit</Link>
          </td>
          <td>
            <button onClick={this.delete} className="btn btn-danger">Delete</button>
          </td>
        </tr>
    );
  }
}
 
export default TableRow;

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
 
import Create from './components/create.component';
import Edit from './components/edit.component';
import Index from './components/index.component';
 
class App extends Component {
  render() {
    return (
      <Router>
        <div className="container">
          <nav className="navbar navbar-expand-lg navbar-light bg-light">
            <div className="collapse navbar-collapse" id="navbarSupportedContent">
              <ul className="navbar-nav mr-auto">
                <li className="nav-item">
                  <Link to={'/create'} className="nav-link">Создать</Link>
                </li>
                <li className="nav-item">
                  <Link to={'/index'} className="nav-link">База</Link>
                </li>
              </ul>
            </div>
          </nav> <br/>
          <h2>My react CRUD</h2> <br/>
          <Switch>
              <Route exact path='/create' component={ Create } />
              <Route path='/edit/:id' component={ Edit } />
              <Route path='/index' component={ Index } />
          </Switch>
        </div>
      </Router>
    );
  }
}
 
export default App;