title: Reactjs: Using same form for add and update
body: <p>I crafted a reactjs crud app with help of a tutorial and it works great now. Now i am trying to merge two form together so that same form should be used for both <code>add</code> and <code>update</code> operation.</p>
  
  <p>This is my <code>allpost.js</code> file</p>
  
  <pre><code>import React, { Component } from 'react';
  
  import { connect } from 'react-redux';
  
  import Post from '../components/Post';
  
  import EditComponent from '../components/editComponent';
  
  class AllPost extends Component {
      render() {
          return (
              &lt;div&gt;
                  &lt;h1&gt;All Posts&lt;/h1&gt;
                  {this.props.posts.map((post) =&gt; (
                      &lt;div key={post.id}&gt;
                          {post.editing ? &lt;EditComponent post={post} key={post.id} /&gt; :
                              &lt;Post key={post.id} post={post} /&gt;}
                      &lt;/div&gt;
                  ))}
              &lt;/div&gt;
          );
      }
  }
  
  const mapStateToProps = (state) =&gt; {
      return {
          posts: state
      }
  }
  export default connect(mapStateToProps)(AllPost);
  </code></pre>
  
  <p>and this is my postForm.js file:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux'
  
  
  class PostForm extends Component {
    handleSubmit = (e) =&gt; {
      e.preventDefault();
      const title = this.getTitle.value;
      const message =  this.getMessage.value;
      const data = {
        id: new Date(),
        title,
        message,
        editing: false
      }
      console.log(data)
      this.props.dispatch({
          type: 'ADD_POST',
          data,
      });
      this.getTitle.value = '';
      this.getMessage.value = '';
    }
  render() {
  return (
  &lt;div&gt;
    &lt;h1&gt;Create Post&lt;/h1&gt;
    &lt;form onSubmit={this.handleSubmit}&gt;
     &lt;input required type="text" ref={(input)=&gt;this.getTitle = input} 
      placeholder="Enter Post Title"/&gt;
     &lt;br /&gt;&lt;br /&gt;
     &lt;textarea required rows="5" ref={(input)=&gt;this.getMessage = input} cols="28" 
      placeholder="Enter Post" /&gt;
     &lt;br /&gt;&lt;br /&gt;
     &lt;button&gt;Post&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  );
  }
  }
  export default connect()(PostForm);
  </code></pre>
  
  <p>and this is my <code>editComponent.js</code> file</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  
  
  class EditComponent extends Component {
  handleEdit = (e) =&gt; {
    e.preventDefault();
    const newTitle = this.getTitle.value;
    const newMessage = this.getMessage.value;
    const data = {
      newTitle,
      newMessage
    }
    this.props.dispatch({ type: 'UPDATE', id: this.props.post.id, data: data })
  }
  render() {
  return (
  &lt;div&gt;
    &lt;form onSubmit={this.handleEdit}&gt;
      &lt;input required type="text" ref={(input) =&gt; this.getTitle = input}
      defaultValue={this.props.post.title} placeholder="Enter Post Title" /&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;textarea required rows="5" ref={(input) =&gt; this.getMessage = input}
      defaultValue={this.props.post.message} cols="28" placeholder="Enter Post" /&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;button&gt;Update&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  );
  }
  }
  export default connect()(EditComponent);
  </code></pre>
  
  <p>and this is my post.js file:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux'
  
  class Post extends Component {
    render() {
    return (
      &lt;div&gt;
        &lt;h2&gt;{this.props.post.title}&lt;/h2&gt;
        &lt;p&gt;{this.props.post.message}&lt;/p&gt;
        &lt;button onClick={() =&gt; this.props.dispatch({type: 'EDIT_POST', id: this.props.post.id})}&gt;EDIT
        &lt;/button&gt;
        &lt;button onClick={ () =&gt; this.props.dispatch({type: 'DELETE_POST', id: this.props.post.id}) }&gt;DELETE
        &lt;/button&gt;
      &lt;/div&gt;
    );
   }
  }
  export default connect()(Post);
  </code></pre>
  
  <p>and this is my <code>postReducer.js</code> file:</p>
  
  <pre><code>const postReducer = (state = [], action) =&gt; {
      switch(action.type) {
        case 'ADD_POST':
          return state.concat([action.data]);
        case 'DELETE_POST':
          return state.filter((post)=&gt;post.id !== action.id);
        case 'EDIT_POST':
          return state.map((post)=&gt;post.id === action.id ? {...post,editing:!post.editing}:post)
        case 'UPDATE':
          return state.map((post)=&gt;{
            if(post.id === action.id) {
              return {
                 ...post,
                 title:action.data.newTitle,
                 message:action.data.newMessage,
                 editing: !post.editing
              }
            } else return post;
          })
        default:
          return state;
      }
    }
    export default postReducer;
  </code></pre>
  
  <p>Can anyone please help me to achieve this? I tried a lot to use same form form for both add and update and i failed to achieve this.</p>