title: how come event.target.value is only capturing the first letter in string input
body: <p>Once I started passing props from parent to child to child I have been getting this problem where the <code>getQuestion</code> function only gets me the first letter typed, In addition in the input field nothing shows up. </p>
  
  <p>Before when my code was just Parent to child it worked.</p>
  
  <p>I want to know what exactly is going on because I have tried debugging by console logging and all I know is certain is that it only registers the first letter.</p>
  
  <p>This question did not help because I have not misspelled <code>onChange</code>.</p>
  
  <p><a href="https://stackoverflow.com/questions/34006333/cant-type-in-react-input-text-field">Can&#39;t type in React input text field</a></p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>class App extends Component {
    constructor(props){
      super(props);
  
  
  
      this.getPostId = this.getPostId.bind(this);
      this.getQuestion = this.getQuestion.bind(this);
      this.makePost = this.makePost.bind(this);
      this.getBody = this.getBody.bind(this);
      this.getPostType = this.getPostType.bind(this);
      this.getImgSrc = this.getImgSrc.bind(this);
      this.submitPost = this.submitPost.bind(this);
      this.formOpen = this.formOpen.bind(this);
      this.formClose = this.formClose.bind(this);
  
      this.back = this.back.bind(this);
      this.showPost = this.showPost.bind(this);
      this.renderPosts = this.renderPosts.bind(this);
  
      //Answer/Response methods
      this.makeAnswer = this.makeAnswer.bind(this);
      this.getAnswer = this.getAnswer.bind(this);
      this.submitAnswer = this.submitAnswer.bind(this);
  
      this.state = {
        posts: [],
  
          answers: [],
  
        question: '',
        body: '',
        postType: 'Question',
        imgSrc: '',
        form: false,
        openedPost: null,
        answer: '',
        favorited: false,
  
        //sign up
        email:'',
        password: '',
        user: null
  
      }
  
  }
  getQuestion(event) {
    event.preventDefault();
    this.setState({ question:event.target.value });
  }
  
  
  render() {
  
  
      return (
  
        &lt;Router&gt;
          &lt;div className="container"&gt;
            &lt;Route
                    exact path={"/"}
                    component={() =&gt; &lt;Home /&gt;}
            /&gt;
  
            &lt;Route
                    exact path={"/home"}
                    component={() =&gt; &lt;Home /&gt;}
            /&gt;
  
            &lt;Route
                  exact path={"/signup"}
                  component={() =&gt; &lt;SignUp /&gt;}
            /&gt;
  
            &lt;Route
                  exact path={`/dashboard`}
                  component={() =&gt;
                    &lt;Dashboard back={this.back}
                      form={this.state.form}
                        openedPost={this.state.openedPost}
                          renderPosts={this.renderPosts}
                            formClose={this.formClose}
                              formOpen={this.formOpen}
                                posts={this.state.posts}
                                  getPostId={this.getPostId}
                                    getQuestion={this.getQuestion}
                                      makePost={this.makePost}
                                        getBody={this.getBody}
                                          getPostType={this.getPostType}
                                            getImgSrc={this.getImgSrc}
                                                submitPost={this.submitPost}
                                                  test={this.test}
                                                    question={this.state.question}
  
                  /&gt;}
                /&gt;
  
  
  
                  &lt;Route
                        exact path={`/dashboard/post${this.state.openedPost}`}
                        component={() =&gt;
                          &lt;SinglePost posts={this.state.posts}
                                        openedPost={this.state.openedPost}
                                         getAnswer={this.getAnswer}
                                          makeAnswer={this.makeAnswer}
                                            submitAnswer={this.submitAnswer}
                                              showAnswers={this.showAnswers}
                                                renderAnswers={this.renderAnswers}
                                                  renderFavorite={this.renderFavorite}
                                                    userFavorited={this.userFavorited}
                                                      back={this.back}
  
                        /&gt;
                      }
  
                      /&gt;
  
  
  
  
  
  
        &lt;/div&gt;
      &lt;/Router&gt;
      );
    }
  </code></pre>
  
  <p><strong>Dashboard.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import Navagationbar from  '../../components/Navigation/Navagationbar';
  import Header from  '../../components/Header/Header';
  import SignUpButton from  '../../components/SignUp/SignUpButton';
  import AddPostForm from './AddPostForm';
  import './styles.css';
  
  import {
    Link
  } from 'react-router-dom'
  
  class Dashboard extends Component {
    render() {
  
  
      let renderedPosts = null;
  
  
  
      let createPostButton =  &lt;div className="container" &gt;&lt;button className="button-primary" onClick={this.props.formOpen}&gt; Create Post &lt;/button&gt; &lt;/div&gt;;
  
      if(this.props.openedPost) {
        renderedPosts = null;
        createPostButton = null;
      }
      else {
        renderedPosts = this.props.renderPosts();
      }
  
          let createPostForm = null;
          const openedForm = this.props.form;
          if(openedForm) {
          createPostForm =
                &lt;AddPostForm
                  formClose={this.props.formClose}
                      posts={this.props.posts}
                        getPostId={this.props.getPostId}
                          getQuestion={this.props.getQuestion}
                            makePost={this.props.makePost}
                              getBody={this.props.getBody}
                                getPostType={this.props.getPostType}
                                  getImgSrc={this.props.getImgSrc}
                                      submitPost={this.props.submitPost}
                                        question={this.props.question}
  
                                      /&gt;
  
            createPostButton = null;
          }
          console.log("OPENED FORM IS " + openedForm)
      return (
      &lt;div &gt;
        &lt;SignUpButton /&gt;
        &lt;Header /&gt;
        &lt;button onClick={this.props.test}/&gt;
        {this.props.openedPost ? null : &lt;Navagationbar /&gt;}
  
  
  
          {createPostForm}
          &lt;div className="row"&gt;
            &lt;div&gt;
              {createPostButton}
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div className="row"&gt;
  
  
  
          &lt;/div&gt;
        &lt;div className="row"&gt;
          &lt;div className="twelve columns"&gt;
              {renderedPosts}
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
      );
    }
  }
  
  
  export default Dashboard;
  </code></pre>
  
  <p><strong>AddPostForm.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import './styles.css';
  
  class AddPostForm extends Component {
      render() {
      return(
        &lt;div className="container"&gt;
  
  
  
        &lt;div className="row"&gt;
              &lt;div className="six columns"&gt;
                &lt;label&gt;Post Title&lt;/label&gt;
                  &lt;input onChange={this.props.getQuestion} value={this.props.question} className="u-full-width" type="search" placeholder="title" id="exampleEmailInput"/&gt;
              &lt;/div&gt;
  
                &lt;div className="six columns"&gt;
                  &lt;label&gt;Post Type&lt;/label&gt;
                    &lt;select value={this.props.type} onChange={this.props.getPostType} className="u-full-width"&gt;
                      &lt;option value="Question"&gt;Question&lt;/option&gt;
                      &lt;option value="Discussion"&gt;Discussion&lt;/option&gt;
  
                   &lt;/select&gt;
                &lt;/div&gt;
          &lt;/div&gt;
              &lt;div className="row"&gt;
                &lt;div className="twelve columns"&gt;
                  &lt;label&gt;Post&lt;/label&gt;
                    &lt;textarea onChange={this.props.getBody}  className="u-full-width" placeholder="get some clout" id="postMessage"&gt;&lt;/textarea&gt;
                  &lt;label&gt;
                    &lt;span&gt;Image Link&lt;/span&gt; &lt;br /&gt;
                      &lt;input type="search"  onChange={this.props.getImgSrc}/&gt;
                  &lt;/label&gt;
                    &lt;input className="button-primary" type="button" value="submit" onClick={this.props.submitPost}/&gt;
                    &lt;button onClick={this.props.formClose}&gt;Cancel &lt;/button&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
  
      &lt;/div&gt;
  
      );
    }
  }
  
  export default AddPostForm;
  </code></pre>
  
  <p>edit:
  After removing <code>event.preventDefault()</code> from <code>getQuestion</code> I can type but why does the input field unfocus after typing a single letter. </p>
  
  <p>Is it because after every time I type the input field re-renders?</p>
  
  <p>edit: Added majority of the code as requested.</p>
  
  <p>This is sufficient in my opinion let me know if you want the rest of the functions.</p>