How to pass id and store the id in variable for updating the post in redux and formik

How to update the Post by passing initialvalue and id in put request

TableList.js

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’

class TableList extends React.Component {

componentDidMount() {
 this.props.loadTableList();

}

 handleEdit = (id,list, setFieldValue) => {
 setFieldValue('name', list.name);
 setFieldValue('email', list.email);
 setFieldValue('phone', list.phone);
 setFieldValue('street', list.street);
 setFieldValue('website', list.website)

}

render() {
const { tableList } = this.props;

 return (
     <>
   <div style={{ margin: 110 }}>

     <Formik 

     initialValues={{
     name: '',
     email: '',
     phone: '',
     website: '',
      address : {
         street: ''}

     }}

     validationSchema={validation}


     onSubmit={(initialValues)=>{
        this.props.addNewpost(initialValues);

     }}

     >
         {({errors,handleSubmit,handleChange,touched})=>(

             <Form onSubmit={handleSubmit}>
                 <h3>ADD USER</h3>
             <div>
              <input placeholder="Name" name="name"  onChange={handleChange} />
              {touched.name && errors.name ? (<small className='text-danger'>{errors.name}</small>) : null}
              </div>
            <div>
            <input placeholder="Email" name="email" onChange={handleChange}/>                                                                             {touched.email && errors.email ? (<small className='text-danger'>{errors.email}  </small>) : null}
            </div>
            <div>
           <input placeholder="Phone no" name="phone" onChange={handleChange}  />
           {touched.phone && errors.phone ? (<small className='text-danger'>{errors.phone}  </small>) : null}
              </div>
              <div>
          <input placeholder="Website" name="website" onChange={handleChange} />
          {touched.website && errors.website ? (<small className='text-danger'>{errors.website}</small>) : null}
            </div>
            <div>
          <input placeholder="Street" name='street' onChange={handleChange} />
          {errors.street && touched.street ? (<small className='text-danger'>{errors.street}</small>) : null}
          </div>
          <div>
          <button  type='submit'  onSubmit={handleSubmit}>ADD</button>
            </div>



             </Form>

         )        
         }
      </Formik>  
                     {tableList.map((user) => {
                         return <tr key={user.name}>
                             <td>{user.id}</td>
                             <td>{user.name}</td>
                             <td>{user.email}</td>
                             <td>{user.address.street}</td>
                             <td>{user.phone}</td>
                             <Link to='/'>{user.website}</Link>
                             <td>
                                 <button onClick={() =>       this.props.deletePosts(user.id)}>Delete</button>
                             </td>
                             <td>
                          <button onClick={() => this.handleEdit( user.id,user,setFieldValue)}>Edit</button>
                             </td>
                         </tr>

                     })}                 

             </tbody>

             </Table>


         </div>
     </>
 )

}
}

   const mapStateToProps = (state) => {
return {
   tableList: get(state, ['listReducer', 'posts'], [])

}
}

   const mapDispatchToProps = (dispatch) => {

return {
updatePost: (id,name,email,phone,website)=>dispatch(editPost(id,name,email,phone,website))

}
}

export default connect(mapStateToProps, mapDispatchToProps)(TableList)

• listaction.js

export const editPost = (id,name,email,phone,website,address)=>{
return (dispatch)=>{

 axios.put(`https://jsonplaceholder.typicode.com/users/${id}`,name,email,phone,website,address)

 .then(response => {
     dispatch({
         type: actionTypes.EDIT_POST,
         payload: response.data
     })

     console.log(response.data);
 })
 .catch(error => {
     console.log(error);

 })

}
}

• reducer.js

  case actionTypes.EDIT_POST:
  console.log(action.payload)
  return{
  …state,
  posts: action.payload,