title: Disable button based onChange value in React
body: <p>How can i tell onChange to set the disable button to true on the update button, if this.state.title is less than 3 characters, i made an attempt but it wont let me enter a value. It breaks the code pretty much. I want the update to be passed to redux. </p>
  
  <p>here is what i have, disclaimer some code has been removed to be more relevant. </p>
  
  <p><strong>PostItem.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import Paper from '@material-ui/core/Paper';
  import Button from '@material-ui/core/Button';
  import Typography from '@material-ui/core/Typography';
  import moment from 'moment';
  import Editable from './Editable';
  import {connect} from 'react-redux';
  import {UpdatePost} from '../actions/';
  const Styles = {
      myPaper: {
          margin: '20px 0px',
          padding: '20px'
      },
      button:{
          marginRight:'30px'
      }
  }
  
  
  class PostItem extends Component{
  
      constructor(props){
          super(props);
  
          this.state = {
              disabled: false,
          }
      }
  
  
      onUpdate = (id, title) =&gt; () =&gt; {
          // we need the id so expres knows what post to update, and the title being that only editing the title. 
          if(this.props.myTitle !== null){
              const creds = {
                  id, title
              }
              this.props.UpdatePost(creds); 
          }
  
      }
      render(){
          const {title, id, removePost, createdAt, post_content, username, editForm, isEditing, editChange, myTitle, postUpdate} = this.props
          return(
              &lt;div&gt;
                     &lt;Typography variant="h6" component="h3"&gt;
                     {/* if else teneray operator */}
                     {isEditing ? (
                      //  need a way to disable update button if the value is less than 3 characters 
                         &lt;Editable editField={myTitle ? myTitle : title} editChange={editChange}/&gt;
                     ): (
                         &lt;div&gt;
                             {title}
                         &lt;/div&gt;    
                     )}         
                     &lt;/Typography&gt;
                     &lt;Typography component="p"&gt;
                         {post_content}
                         &lt;h5&gt;
                             by: {username}&lt;/h5&gt;
                         &lt;Typography color="textSecondary"&gt;{moment(createdAt).calendar()}&lt;/Typography&gt;
                     &lt;/Typography&gt;
                     {!isEditing ? (
                         &lt;Button variant="outlined" type="submit" onClick={editForm(id)}&gt;
                             Edit
                         &lt;/Button&gt;
                     ):(
  
                         // pass id, and myTitle which as we remember myTitle is the new value when updating the title
                      //  how would i set disabled to false if the value from editField is less than 3 charaters.
                          &lt;Button 
                              disabled={this.state.title.length &gt; 3 }
                              variant="outlined" 
                              onClick={this.onUpdate(id, myTitle)}&gt;
                              Update
                          &lt;/Button&gt;
                     )}
                     &lt;Button
                         style={{marginLeft: '0.7%'}}
                         variant="outlined"
                         color="primary"
                         type="submit"
                         onClick={removePost(id)}&gt;
                         Remove
                     &lt;/Button&gt;
             &lt;/div&gt;
         )
  
      }
  
  }
  
  const mapStateToProps = (state) =&gt; ({
      disabled: state.post.disabled
  })
  
  
  const mapDispatchToProps = (dispatch) =&gt; ({
      // pass creds which can be called anything, but i just call it credentials but it should be called something more 
      // specific.
      UpdatePost: (creds) =&gt; dispatch(UpdatePost(creds)),
      // Pass id to the DeletePost functions.
  });
  export default connect(mapStateToProps, mapDispatchToProps)(PostItem);
  </code></pre>
  
  <p>editChange is being called from this onChange method</p>
  
  <p><strong>PostList.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import Paper from '@material-ui/core/Paper';
  import Button from '@material-ui/core/Button';
  import Typography from '@material-ui/core/Typography';
  import moment from 'moment';
  import {connect} from 'react-redux';
  import {DeletePost, UpdatePost,EditChange, DisableButton} from '../actions/';
  import PostItem from './PostItem';
  const Styles = {
      myPaper: {
          margin: '20px 0px',
          padding: '20px'
      }
  }
  class PostList extends Component{
      constructor(props){
          super(props);
          this.state ={
              title: ''
          }
      }
      // Return a new function. Otherwise the DeletePost action will be dispatch each
       // time the Component rerenders.
      removePost = (id) =&gt; () =&gt; {
          this.props.DeletePost(id);
      }
      onChange = (e) =&gt; {
          e.preventDefault();
          this.setState({
              title: e.target.value
          })
  
  
      }
  
  
      formEditing = (id) =&gt; ()=&gt; {;
  
          this.props.EditChange(id);
      }
  
      render(){
          const {posts} = this.props;
          return (
              &lt;div&gt;
                  {posts.map((post, i) =&gt; (
                      &lt;Paper key={post.id} style={Styles.myPaper}&gt;
                      {/* {...post} prevents us from writing all of the properties out */}
                          &lt;PostItem
                               myTitle={this.state.title} 
                               editChange={this.onChange} 
                               editForm={this.formEditing} 
                               isEditing={this.props.isEditingId === post.id} 
                               removePost={this.removePost} 
                               {...post} 
                          /&gt;
                      &lt;/Paper&gt;
                  ))}
              &lt;/div&gt;
          )
      }
  }
  
  const mapStateToProps = (state) =&gt; ({
      // disabled: state.post.disabled,
      isEditingId: state.post.isEditingId
  })
  const mapDispatchToProps = (dispatch) =&gt; ({
      // pass creds which can be called anything, but i just call it credentials but it should be called something more 
      // specific.
      EditChange: (id) =&gt; dispatch(EditChange(id)),
      UpdatePost: (creds) =&gt; dispatch(UpdatePost(creds)),
      // Pass id to the DeletePost functions.
      DeletePost: (id) =&gt; dispatch(DeletePost(id))
  });
  export default connect(mapStateToProps, mapDispatchToProps)(PostList);
  </code></pre>
  
  <p><strong>Action for this.props.DisableButton</strong></p>
  
  <pre><code>export const DisableButton = () =&gt; {
      return(dispatch) =&gt; {
          dispatch({type:DISABLED});
      }
  }
  </code></pre>
  
  <p><strong>Posts reducer for disable button, etc.</strong> </p>
  
  <pre><code>import { DISABLED} from '../actions/';
  
  const initialState = {,
      disabled: false,
      isEditingId:null
  }
  
  export default (state = initialState, action) =&gt; {
      switch (action.type) {
  
          case DISABLED:
              return({
                  ...state,
                  disabled:true
              })
  
          default:
              return state
      }
  }
  </code></pre>
  
  <p><strong>editable component</strong></p>
  
  <pre><code>import React from 'react';
  import Paper from '@material-ui/core/Paper';
  import Button from '@material-ui/core/Button';
  import Typography from '@material-ui/core/Typography';
  import TextField from '@material-ui/core/TextField';
  
  const Editable = (props) =&gt; (
      &lt;div&gt;
          &lt;TextField
              id="outlined-name"
              label="Title"
              style={{width: 560}}
              name="title"
              value={props.editField}
              onChange={props.editChange}
              margin="normal"
              required
              variant="outlined"/&gt;
  
      &lt;/div&gt;
  )
  
  export default Editable; 
  </code></pre>