title: How to pass id and store the id in variable for updating the post in redux and formik
body: <ul>
  <li><p>How to update the Post by passing initialvalue and id in put request</p>
  <p>TableList.js</p>
  <p>import React from 'react';
  import { connect } from 'react-redux';
  import { Form, Table } from 'react-bootstrap';
  import {  editPost, } from '../actions/listActions';
  import {Formik} from 'formik'
  import * as Yup from 'yup'</p>
  <p>class TableList extends React.Component {</p>
  <pre><code>componentDidMount() {
   this.props.loadTableList();
  </code></pre>
  <p>}</p>
  <pre><code> handleEdit = (id,list, setFieldValue) =&gt; {
   setFieldValue('name', list.name);
   setFieldValue('email', list.email);
   setFieldValue('phone', list.phone);
   setFieldValue('street', list.street);
   setFieldValue('website', list.website)
  </code></pre>
  <p>}</p>
  <p>render() {
  const { tableList } = this.props;</p>
  <pre><code> return (
       &lt;&gt;
     &lt;div style={{ margin: 110 }}&gt;
  
       &lt;Formik 
  
       initialValues={{
       name: '',
       email: '',
       phone: '',
       website: '',
        address : {
           street: ''}
  
       }}
  
       validationSchema={validation}
  
  
       onSubmit={(initialValues)=&gt;{
          this.props.addNewpost(initialValues);
  
       }}
  
       &gt;
           {({errors,handleSubmit,handleChange,touched})=&gt;(
  
               &lt;Form onSubmit={handleSubmit}&gt;
                   &lt;h3&gt;ADD USER&lt;/h3&gt;
               &lt;div&gt;
                &lt;input placeholder=&quot;Name&quot; name=&quot;name&quot;  onChange={handleChange} /&gt;
                {touched.name &amp;&amp; errors.name ? (&lt;small className='text-danger'&gt;{errors.name}&lt;/small&gt;) : null}
                &lt;/div&gt;
              &lt;div&gt;
              &lt;input placeholder=&quot;Email&quot; name=&quot;email&quot; onChange={handleChange}/&gt;                                                                             {touched.email &amp;&amp; errors.email ? (&lt;small className='text-danger'&gt;{errors.email}  &lt;/small&gt;) : null}
              &lt;/div&gt;
              &lt;div&gt;
             &lt;input placeholder=&quot;Phone no&quot; name=&quot;phone&quot; onChange={handleChange}  /&gt;
             {touched.phone &amp;&amp; errors.phone ? (&lt;small className='text-danger'&gt;{errors.phone}  &lt;/small&gt;) : null}
                &lt;/div&gt;
                &lt;div&gt;
            &lt;input placeholder=&quot;Website&quot; name=&quot;website&quot; onChange={handleChange} /&gt;
            {touched.website &amp;&amp; errors.website ? (&lt;small className='text-danger'&gt;{errors.website}&lt;/small&gt;) : null}
              &lt;/div&gt;
              &lt;div&gt;
            &lt;input placeholder=&quot;Street&quot; name='street' onChange={handleChange} /&gt;
            {errors.street &amp;&amp; touched.street ? (&lt;small className='text-danger'&gt;{errors.street}&lt;/small&gt;) : null}
            &lt;/div&gt;
            &lt;div&gt;
            &lt;button  type='submit'  onSubmit={handleSubmit}&gt;ADD&lt;/button&gt;
              &lt;/div&gt;
  
  
  
               &lt;/Form&gt;
  
           )        
           }
        &lt;/Formik&gt;  
                       {tableList.map((user) =&gt; {
                           return &lt;tr key={user.name}&gt;
                               &lt;td&gt;{user.id}&lt;/td&gt;
                               &lt;td&gt;{user.name}&lt;/td&gt;
                               &lt;td&gt;{user.email}&lt;/td&gt;
                               &lt;td&gt;{user.address.street}&lt;/td&gt;
                               &lt;td&gt;{user.phone}&lt;/td&gt;
                               &lt;Link to='/'&gt;{user.website}&lt;/Link&gt;
                               &lt;td&gt;
                                   &lt;button onClick={() =&gt;       this.props.deletePosts(user.id)}&gt;Delete&lt;/button&gt;
                               &lt;/td&gt;
                               &lt;td&gt;
                            &lt;button onClick={() =&gt; this.handleEdit( user.id,user,setFieldValue)}&gt;Edit&lt;/button&gt;
                               &lt;/td&gt;
                           &lt;/tr&gt;
  
                       })}                 
  
               &lt;/tbody&gt;
  
               &lt;/Table&gt;
  
  
           &lt;/div&gt;
       &lt;/&gt;
   )
  </code></pre>
  <p>}
  }</p>
  <pre><code>   const mapStateToProps = (state) =&gt; {
  return {
     tableList: get(state, ['listReducer', 'posts'], [])
  </code></pre>
  <p>}
  }</p>
  <pre><code>   const mapDispatchToProps = (dispatch) =&gt; {
  </code></pre>
  <p>return {
  updatePost: (id,name,email,phone,website)=&gt;dispatch(editPost(id,name,email,phone,website))</p>
  <p>}
  }</p>
  <p>export default connect(mapStateToProps, mapDispatchToProps)(TableList)</p>
  <ul>
  <li>listaction.js</li>
  </ul>
  <p>export const editPost = (id,name,email,phone,website,address)=&gt;{
  return (dispatch)=&gt;{</p>
  <pre><code> axios.put(`https://jsonplaceholder.typicode.com/users/${id}`,name,email,phone,website,address)
  
   .then(response =&gt; {
       dispatch({
           type: actionTypes.EDIT_POST,
           payload: response.data
       })
  
       console.log(response.data);
   })
   .catch(error =&gt; {
       console.log(error);
  
   })
  </code></pre>
  <p>}
  }</p>
  <ul>
  <li><p>reducer.js</p>
  <p>case actionTypes.EDIT_POST:
  console.log(action.payload)
  return{
  ...state,
  posts: action.payload,</p>
  </li>
  </ul>
  </li>
  </ul>