Cannot Write Into The Input Field In React App

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.

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

Here is my app.js file.

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) => {
    this.setState({searchfield: event.target.value});
  }

  onSearchClick = () => {
    fetch('https://maps.googleapis.com/maps/api/place/findplacefromtext/json?key=&inputtype=textquery&type=restaurant&input=kfc&fields=name,place_id,formatted_address')
      .then(response=> response.json())
      .then(results => {this.setState({ searchresults: results})})
      .then(results => {console.log("lulli" + JSON.stringify(this.state.searchresults))});
  }

  render(){
    return (
      <div className="App">
        <BrowserRouter> {/* using react-router-dom for routing */}
          <NavigationBar />  {/* for navigation through the app, always rendered */}
          <Logo />   {/* a logo for the RestrauntReviewsTool */}
          <Switch>
            <Route path='/' 
              exact 
              component={() => <SearchForm onInputChange={this.onInputChange} onSearchClick={this.onSearchClick} /> } 
            />  
            <Route 
              path='/searchfilter' 
              component={() => <SearchFilter searchresults={this.searchresults} /> } 
            />  

            <ReviewComponent path='/reviewcomponent' component={ReviewComponent} /> {/* final restaurant details */}
          </Switch>
        </BrowserRouter>

      </div>
    );
  }
}


export default App;

here is my SearchForm.js

import React from 'react';
import {Link} from 'react-router-dom';

const SearchForm = ({ onInputChange, onSearchClick }) => {
    return(
        <div>
            <p className='f3'>
                {'Search here for restaurants, maybe make an api fetch here and populate data in the SearchFilter component'}
            </p>
            <div className='center'>
                <div className='form center pa4 br3 shadow-5'>
                    <input className='f4 pa2 w-70 center' type='text' onChange={onInputChange}/>
                    <button className='w-30 grow f4 ph3 pv2 dib white bg-light-purple' onClick={onSearchClick}>
                    <Link to ='/searchfilter'>
                    Search   
                    </Link>    
                    </button>

                </div>
            </div>
        </div>
    );
}

export default SearchForm;

you need to pass searchField state to Child component as props.

And inside SearchForm component, your input need to have value={searchField}

So the child component will re-render when your searchField state changed.

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) => {
    this.setState({searchfield: event.target.value});
  }

  onSearchClick = () => {
    fetch('https://maps.googleapis.com/maps/api/place/findplacefromtext/json?key=&inputtype=textquery&type=restaurant&input=kfc&fields=name,place_id,formatted_address')
      .then(response=> response.json())
      .then(results => {this.setState({ searchresults: results})})
      .then(results => {console.log("lulli" + JSON.stringify(this.state.searchresults))});
  }

  render(){
    return (
      <div className="App">
        <BrowserRouter> {/* using react-router-dom for routing */}
          <NavigationBar />  {/* for navigation through the app, always rendered */}
          <Logo />   {/* a logo for the RestrauntReviewsTool */}
          <Switch>
            <Route path='/' 
              exact 
              component={() => <SearchForm searchfield={this.state.searchfield} onInputChange={this.onInputChange} onSearchClick={this.onSearchClick} /> } 
            />  
            <Route 
              path='/searchfilter' 
              component={() => <SearchFilter searchresults={this.searchresults} /> } 
            />  

            <ReviewComponent path='/reviewcomponent' component={ReviewComponent} /> {/* final restaurant details */}
          </Switch>
        </BrowserRouter>

      </div>
    );
  }
}


export default App;

import React from 'react';
import {Link} from 'react-router-dom';

const SearchForm = ({ searchField, onInputChange, onSearchClick }) => {
    return(
        <div>
            <p className='f3'>
                {'Search here for restaurants, maybe make an api fetch here and populate data in the SearchFilter component'}
            </p>
            <div className='center'>
                <div className='form center pa4 br3 shadow-5'>
                    <input className='f4 pa2 w-70 center' type='text' value={searchField} onChange={onInputChange}/>
                    <button className='w-30 grow f4 ph3 pv2 dib white bg-light-purple' onClick={onSearchClick}>
                    <Link to ='/searchfilter'>
                    Search   
                    </Link>    
                    </button>

                </div>
            </div>
        </div>
    );
}

export default SearchForm;