Error in console

import React, { Component } from 'react';

export default class SearchForm extends Component {

  state = {
    searchText: ''
  }

  onSearchChange = e => {
    this.setState({ searchText: e.target.value });
  }

  handleSubmit = e => {
    e.preventDefault();
        this.props.onSearch(this.state.searchText);
    e.currentTarget.reset();
  }

  render() {  
    return (
      <form className="search-form" onSubmit={this.handleSubmit} >
        <label className="is-hidden" htmlFor="search">Search</label>
        <input type="search" 
               onChange={this.onSearchChange}
               name="search" 
               placeholder="Search..." />
        <button type="submit" id="submit" className="search-button"><i className="material-icons icn-search">search</i></button>
      </form>      
    );
  }
}

import React, { Component } from 'react';
import './App.css';
import axios from 'axios';
import SearchForm from './Components/SearchForm';
import GifList from './Components/GifList';

const API_Key = 'G7l64tPC4irRIG4kFZlZo7oT57QBo5nK';

export default class App extends Component {

  constructor() {
    super();

        this.state = {
            gifs: []
        };
  } 

    performSearch = (query) => {
        axios.get(`https://api.giphy.com/v1/gifs/search?q=${query}&limit=24&api_key=G7l64tPC4irRIG4kFZlZo7oT57QBo5nK`)
        .then( response => {
            this.setState({
                gifs: response.data.data
            });
        })
        .catch( response => {
            console.log('Error parsing and fetching data');
        });
    }

  render() { 
    return (
      <div>
        <div className="main-header">
          <div className="inner">
            <h1 className="main-title">GifSearch</h1>
            <SearchForm onSearch={this.peformSearch} />      
          </div>   
        </div>    
        <div className="main-content">
          <GifList data={this.state.gifs} />
        </div>
      </div>
    );
  }
}