List in React component not updating when item is removed from array

Question

In a React app I have a component that lists people invited to a project. When I remove an item from the array that's used as the source for the list, React isn't updating the list on the page.

The list of invites are passed to the component as props. There is a link on each invite to cancel the invitation, to this event I have attached a function that removes that invite from the array, but for some reason it is not being removed from the list shown on the page.

This list of invites is created inside the component via a function I've created;

function invites(teamInvites) {
    if (!teamInvites) {
      return null;
    }

    return (
        <ul className={styles.pendingInvites}>
          {teamInvites.map((invite, index) => (
              <li key={invite.id} id={invite.id}>
                <span class={styles.email}>{invite.email}
                <span className={styles.pending}>Pending</span></span>
                <span class={styles.right}>
                  <a onClick={() => {actionResendTeamUserInvite(teamId, teamName, invite.email)}}>Resend Invite</a>&nbsp;|&nbsp;
                  <a onClick={() => {removeInvite(invite.email)}}>Cancel</a>
                </span>
              </li>
          ))}
        </ul>
    );
  }

This is called in the component like this;

{invites(teamInvites)}

I then have a function which removes the invite from the teamInvites array;

const removeInvite = (email) => {
    actionRemoveTeamUserInvite(teamId, email);
    let index = 0;
    let removeAtIndex = -1;
    teamInvites.forEach(invite => {
      if (invite.email === email) {
        removeAtIndex = index;
      }
      index++;
    });
    if (removeAtIndex >= 0) {
      removeAtIndex = -1;
    }

    return false;
  }

I have confirmed that the array itself is being updated by outputting the length of the array, which reduces by one each time the function above is executed.

Why does the view itself not update along with the array?

Can you share the way you remove an item from the list? It should remove in immutable way or it won’t get updated — tmhao2005
– tmhao2005, Commented Sep 7, 2020 at 14:53
You are probably mutating the state directly which is preventing a re-render of the component. Can you share the code of actionRemoveTeamUserInvite ? Are you using redux? — Yousaf
– Yousaf, Commented Sep 7, 2020 at 15:04

CertainPerformance · Accepted Answer · 2020-09-07 15:02:34Z

Put the teamInvites prop into state, and then when removeInvite is called, you can use the index of the mapped invite to remove it from the state array:

const Invites = ({ teamInvites }) => {
  if (!teamInvites) {
    return null;
  }
  const [teamInvitesState, setTeamInvitesState] = useState(teamInvites);
  const removeInvite = (i) => {
    setTeamInvitesState([
      ...teamInvitesState.slice(0, i),
      ...teamInvitesState.slice(i + 1)
    ]);
  };
  return (
      <ul className={styles.pendingInvites}>
        {teamInvites.map((invite, index) => (
            <li key={invite.id} id={invite.id}>
              <span class={styles.email}>{invite.email}
              <span className={styles.pending}>Pending</span></span>
              <span class={styles.right}>
                <a onClick={() => {actionResendTeamUserInvite(teamId, teamName, invite.email)}}>Resend Invite</a>&nbsp;|&nbsp;
                <a onClick={() => {removeInvite(index)}}>Cancel</a>
              </span>
            </li>
        ))}
      </ul>
  );
};

And call it like:

<Invites {...{teamInvites}} />

jmtalarn · Accepted Answer · 2020-09-07 14:52:26Z

0

You need to pass the invites array of values again to rerender the component.

This is what Redux would do if the update is done with an action and the change of global state rerenders the component because it's passed as property when you connect the state with the component.

Or, once you get the invites array of values as a property set it on an internal state and update the state on the removeInvite function.

answered Sep 7, 2020 at 14:52

jmtalarn

1,7551 gold badge14 silver badges19 bronze badges

Comments

maya_nk99 · Accepted Answer · 2020-09-07 14:58:57Z

0

You need to set the state to the modified array. Only then will the re rendering and the mapping of updated array array will take place

answered Sep 7, 2020 at 14:58

maya_nk99

5023 silver badges5 bronze badges

Collectives™ on Stack Overflow

List in React component not updating when item is removed from array

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related