title: Cannot write into the input field in React App
body: <p>Whenever I try start the app, I cannot write anything in the Input field. Maybe because react is re-rendering the some components, because I call setState on each click. </p>
  
  <p>The parent App.js contains a SearchForm which has an input field. Whenever data is entered in the inputfield I call the handler to set the state, so that on the button click a fetch can be made to the API </p>
  
  <p>Here is my app.js file. </p>
  
  <pre><code>import React from 'react';
  import { BrowserRouter, Route, Switch } from 'react-router-dom';
  import './App.css';
  import NavigationBar from './components/NavigationBar/NavigationBar.js';
  import Logo from './components/Logo/Logo.js';
  import SearchForm from './components/SearchForm/SearchForm.js';
  import SearchFilter from './components/SearchFilter/SearchFilter.js';
  import ReviewComponent from './components/ReviewComponent/ReviewComponent.js';
  
  
  class App extends React.Component {
    constructor(){
      super();
      this.state = {
        searchfield: '', 
        searchresults: {}
      }
      this.onInputChange = this.onInputChange.bind(this);
      this.onSearchClick = this.onSearchClick.bind(this);
    }
  
    onInputChange = (event) =&gt; {
      this.setState({searchfield: event.target.value});
    }
  
    onSearchClick = () =&gt; {
      fetch('https://maps.googleapis.com/maps/api/place/findplacefromtext/json?key=&amp;inputtype=textquery&amp;type=restaurant&amp;input=kfc&amp;fields=name,place_id,formatted_address')
        .then(response=&gt; response.json())
        .then(results =&gt; {this.setState({ searchresults: results})})
        .then(results =&gt; {console.log("lulli" + JSON.stringify(this.state.searchresults))});
    }
  
    render(){
      return (
        &lt;div className="App"&gt;
          &lt;BrowserRouter&gt; {/* using react-router-dom for routing */}
            &lt;NavigationBar /&gt;  {/* for navigation through the app, always rendered */}
            &lt;Logo /&gt;   {/* a logo for the RestrauntReviewsTool */}
            &lt;Switch&gt;
              &lt;Route path='/' 
                exact 
                component={() =&gt; &lt;SearchForm onInputChange={this.onInputChange} onSearchClick={this.onSearchClick} /&gt; } 
              /&gt;  
              &lt;Route 
                path='/searchfilter' 
                component={() =&gt; &lt;SearchFilter searchresults={this.searchresults} /&gt; } 
              /&gt;  
  
              &lt;ReviewComponent path='/reviewcomponent' component={ReviewComponent} /&gt; {/* final restaurant details */}
            &lt;/Switch&gt;
          &lt;/BrowserRouter&gt;
  
        &lt;/div&gt;
      );
    }
  }
  
  
  export default App;
  </code></pre>
  
  <p>here is my SearchForm.js </p>
  
  <pre><code>import React from 'react';
  import {Link} from 'react-router-dom';
  
  const SearchForm = ({ onInputChange, onSearchClick }) =&gt; {
      return(
          &lt;div&gt;
              &lt;p className='f3'&gt;
                  {'Search here for restaurants, maybe make an api fetch here and populate data in the SearchFilter component'}
              &lt;/p&gt;
              &lt;div className='center'&gt;
                  &lt;div className='form center pa4 br3 shadow-5'&gt;
                      &lt;input className='f4 pa2 w-70 center' type='text' onChange={onInputChange}/&gt;
                      &lt;button className='w-30 grow f4 ph3 pv2 dib white bg-light-purple' onClick={onSearchClick}&gt;
                      &lt;Link to ='/searchfilter'&gt;
                      Search   
                      &lt;/Link&gt;    
                      &lt;/button&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  
  export default SearchForm;
  </code></pre>