title: Cannot add property, object is not extensible when binding props in React component
body: <p>For some reason when I try to bind a function to a prop in my React component, it is coming up with </p>
  
  <blockquote>
    <p>TypeError: Can't add property onSearch, object is not extensible.</p>
  </blockquote>
  
  <p>I am not too familiar with what this means or why it is appearing, I think it may be to do with the es6 bindings which I am still finding my way around on.</p>
  
  <p>Here are the two most relevant components.</p>
  
  <p><strong>Searchbox</strong></p>
  
  <pre><code>import React from 'react';
  
  import SearchForm from 'SearchForm';
  import searchDisplay from 'searchDisplay';
  import googleRequests from 'googleRequests';
  
  class SearchBox extends React.Component {
  constructor() {
      super();
      this.state = {
          searchResults: []
      }
      this.handleSearch = this.handleSearch.bind(this);
  
  
  }
  handleSearch(searchTerm) {
      googleRequests.search(searchTerm).then((response) =&gt; {
          console.log(response.items);
          this.extrapolateResults(response.items);
      }), ((error) =&gt;{
          console.log(error)
      });
  }
  //pull relevant data out of api call
  extrapolateResults(arr) {
      function Book(objInArr) {
          this.link = objInArr.selfLink;
          this.bookTitle = objInArr.volumeInfo.title;
          this.author = objInArr.volumeInfo.authors;
          this.bookDescription = objInArr.volumeInfo.description;
          this.thumbnail = function() {
              if (objInArr.volumeInfo.hasOwnProperty('imageLinks')){
              return objInArr.volumeInfo.imageLinks.smallThumbnail
          } 
          else {
              return "No Thumbnail Available";
          }
      };
          this.thumbnailPic = this.thumbnail();
  }
  //push extrapolated data into array
  var finalRes = [];
  var initRes = arr;
      initRes.forEach(function (objInArr) {
          var obj = new Book(objInArr);
          finalRes.push(obj);
      })
  this.setState({
      searchResults: finalRes
  })
  console.log(finalRes, this.state.searchResults)
  
  }
  
  
  render() {
      var res = this.state.searchResults;
  
      function renderResults() {
          if (res.length !== 0) {
              return (&lt;SearchDisplay content={res} /&gt;)
          }
          else {
              return;
          }
      }
  
      var style = {
          border: '1px solid black',
          height: '80%',
          width: '83%'
      }
      return (
          &lt;div style={style}&gt;
              &lt;SearchForm onSearch={this.handleSearch}&gt; &lt;/SearchForm&gt;
          &lt;/div&gt;)
  }
  };
  
  export default SearchBox;
  </code></pre>
  
  <p><strong>Searchform</strong></p>
  
  <pre><code>import React from 'react';
  
  class SearchForm extends React.Component {
  constructor(props) {
      super(props);
      this.onFormSubmit = this.onFormSubmit.bind(this);
      this.props.onSearch = props;
  }
  onFormSubmit(e) {
      e.preventDefault();
      var searchTerm = this.refs.searchTerm.value;
      if (searchTerm.length &gt; 0) {
          this.refs.searchTerm.value = '';
          this.props.onSearch(searchTerm);
      }
  }
  
  render() {
      var style = {
          border: '1px solid black',
          float: 'left',
          height: '100%',
          width: '30%'
      }
  
      return(
          &lt;div style={style} className="container"&gt;
              &lt;form onSubmit={this.onFormSubmit}&gt;
                  &lt;input type="text" placeholder="search name here" ref="searchTerm"/&gt;
                  &lt;input type="submit" className="button" value="Get Book"/&gt;
              &lt;/form&gt;
          &lt;/div&gt;
          );
  }
  };
  
  export default SearchForm;
  </code></pre>
  
  <p>I have a feeling I am missing something very simple but after googling this issue for a while I still can't figure out what it is...</p>