Post Method with React and redux

Question

I have a simple app for CRUD operations, now I can delete, edit, and display data, but I want to add new items to a list of users fetched from API(JSON server fake API) using react and redux.

Now when I click add user and save the data only id is sent but other data are not sent.

here is a live demo: Redux live demo with source code sandbox .

Here is my form, AddUserForm.js

import React, { useState } from 'react'
import {useDispatch} from 'react-redux'
import { addNewUser  } from '../redux/acitons/users/Users';

function AddUserForm({users}) {
    const dispatch = useDispatch();
    const [newUserName, setNewUserName] = useState('');

   const handleSubmit = (e) =>{
    e.preventDefault();

    const usersList = users;
    const newUserId = usersList[usersList.length - 1].id + 1;

    console.log("your name", newUserName);
    console.log("your id", newUserId)

    dispatch(addNewUser({
      ...users,
      id: newUserId,
      name: newUserName,
    }));

   }

  const handleCancel = () => {};
  return (
    <tr>
      <td>{newUserName.id}</td>
      <td>
        <input
          value={newUserName}
          name="name"
          onChange={e => setNewUserName(e.target.value)}
        />
      </td>
      <td>
        <button type="button" className="btn outline" onClick={handleCancel}>
          <i className="material-icons">Cancel</i>
        </button>
        <button
          type="button"
          className="btn btn-success btn-link"
          onClick={handleSubmit}
        >
          <i className="material-icons">save</i>
        </button>
      </td>
    </tr>
  );
}

export default AddUserForm

and I call like this in parent components with the on click button.

{adding && <>
            <AddUserForm addNewUser={addNewUser} users={userData.users} />
   </>}

Here is a button in the parent components.

<button
          type="button"
          className="btn btn-success btn-link btn-add"
          onClick={() => setAdding(true)}
        >
    <i className="material-icons">Add user</i>
</button>

What is wrong with my code? any help or suggestions will be appreciated.

have you checked this one? stackoverflow.com/questions/44806870/… — gnujoow
– gnujoow, Commented Jun 1, 2020 at 18:03

Daniele Ricci · Accepted Answer · 2020-06-16 21:53:14Z

2

+100

In the debugging tools screenshot you are showing us the response body, not the request body.

users is an array, why this

dispatch(addNewUser({
  ...users,
  id: newUserId,
  name: newUserName,
}));

intead of this?

dispatch(addNewUser({
  id: newUserId,
  name: newUserName,
}));

The root cause of the problem is in src/redux/acitons/users/Users

export const addNewUser = data => {

  console.log("adding mother a new user", data);

  return dispatch => {
    axios.post("http://localhost:3000/users")

Just change last line in

    axios.post("http://localhost:3000/users", data)

I can see data in the console.log not in the POST.

This gives error with empty usersList.

const newUserId = usersList[usersList.length - 1].id + 1;

Hope this helps.

edited Jun 16, 2020 at 21:53

answered Jun 16, 2020 at 21:08

Daniele Ricci

15.9k1 gold badge32 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

The Dead Man Over a year ago

I changed that but still the same, u can clone the repo and test it on your side

Daniele Ricci Over a year ago

The app opens with "Request failed with status code 404" maybe a back-end is missing?

Daniele Ricci Over a year ago

@TheDeadMan anyway in the repos I cloned data is still missing in the POST request

The Dead Man Over a year ago

Daniel sorry i didnt tell you , you need first to run json-server --watch users.json and then on another terminal run yarn start and u should see the data, am using json server fake api

Daniele Ricci Over a year ago

@TheDeadMan I simply added data to the POST request and it worked... please check my edited answer

|

Collectives™ on Stack Overflow

Post Method with React and redux

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related