Adding new object in array in existing array

Question

I have a CRUD functionality in my react application using hooks and es6. I'm using AntDesign List Component as well. In my add function, after adding for the first time, it's expected that it's been added on the list.

But after creating another one, it's just replacing the existing array. It's not been added like index 1. It's always index 0.

Here's my code

const leaveTypeList = [];
const [isLeaveType, setLeaveType] = useState(leaveTypeList);

useEffect(() => {
  setLeaveType(leaveTypeList);
}, [setLeaveType]);

const payload = {
  leaveTag: values.leaveTag,
  leaveTagColor: values.leaveTagColor,
  hexCode: state.tagColor,
  dateCreated: formatLeaveTypeDate,
};

leaveTypeList.push(payload);
setLeaveType(leaveTypeList);

Hashan Eranda · Accepted Answer · 2019-10-26 16:42:20Z

2

hey since you need to add a new item to array there is no need of the useEffect hook

const leaveTypeList = [];
const [isLeaveType, setLeaveType] = useState(leaveTypeList);

const payload = {
  leaveTag: values.leaveTag,
  leaveTagColor: values.leaveTagColor,
  hexCode: state.tagColor,
  dateCreated: formatLeaveTypeDate,
};

setLeaveType([...isLeaveType,payload]);

you can simple use setter to set new state updating the existing array by adding the new payload to it.

answered Oct 26, 2019 at 16:42

Hashan Eranda

315 bronze badges

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

2 Comments

HMR Over a year ago

@AlyssaReyes Not just a good suggestion, this is actually the correct answer. You should not mutate state so the accepted answer shows a lack of knowledge about React. Here is a reference.

Alyssa Reyes Over a year ago

@HMR Hello. I actually change my code that suggested here. But since Harry Chang first commented and tried his solution, it worked on my end. So I think I'm being fair with him accepting his answer :)

Harry Chang · Accepted Answer · 2019-10-26 16:32:23Z

1

You should push the new data by isLeaveType.push(payload).

Also,

useEffect(() => {
  setLeaveType(leaveTypeList);
}, [setLeaveType]);

makes no sense to me. Since the setLeaveType is the setter for isLeaveType, there is no reason for the effect to depend on it.

edited Oct 26, 2019 at 16:32

answered Oct 26, 2019 at 16:28

Harry Chang

3892 silver badges4 bronze badges

Collectives™ on Stack Overflow

Adding new object in array in existing array

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related