React component not rerendering after array inside object has items pushed to it

Question

I have a context object with an object holding all the information I need for a specific section of my application. The object contains some arrays.

Data

{
   groupname: 'a',
   members: {
     regular: [
         { id: 1, name: 'x' },
         { id: 2, name: 'y' },
     ],
     premium: []
  }
}

I have a form where I can create a new member. Once the member is created I have a function inside a hook where I call the addMember function to add this newly created member.

function useGroup({ initialGroup: GroupType }: Props) {
    const [group, setGroup] = useState<GroupType>(initialGroup)

    const addMember = (member) => {
       group.members.regular = [...group.members.regular, member]
       setGroup(group)
    }

    return {
       group,
       addMember
    }
}

I can use a console log and see this working effectively, however this is not being reflected in my UI. I can see the items when I refresh the page. This is telling me that the UI isnt 'refreshing' when I push the extra item inside my state object.

I feel as if this is because it is a nested array inside of an object. Should I split the members out into there own 'useState' arrays or is there something I am missing to have my UI reflect this being added?

Hossein Zare · Accepted Answer · 2021-09-01 22:27:57Z

1

You're changing the state variable directly.

Try the following approach.

function useGroup({ initialGroup: GroupType }: Props) {
    const [group, setGroup] = useState<GroupType>(initialGroup)

    const addMember = (member) => {
       setGroup(state => {
          const _state = {...state};
                _state.members.regular.push(member);

          return _state;
       });
    }

    return {
       group,
       addMember
    }
}

Update:
You can also use useCallback to prevent the addMember function from being created over an over.

const addMember = useCallback((member) => {
  setGroup(state => {
    const _state = {...state};
          _state.members.regular.push(member);

    return _state;
  });
}, []);

edited Sep 1, 2021 at 22:27

answered Sep 1, 2021 at 22:13

Hossein Zare

5584 silver badges18 bronze badges

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

Comments

marius florescu · Accepted Answer · 2021-09-01 22:14:25Z

1

You are actually changing a state variable incorrectly.
You can try modifying the addMember function as follows:

const addMember = (member) => {
        setGroup({...group,members:{
                regular: [...group.members.regular, member]
            }})
}

EDIT: on onClick (as an example) you must execute the function, not call it in order to work.
eg: <button onClick={addMember({...})}>Example</button>.
NOT <button onClick={() => addMember({...})}>Example</button>

answered Sep 1, 2021 at 22:14

marius florescu

6724 silver badges15 bronze badges

1 Comment

Jason McFarlane Over a year ago

If you have onClick={addMember({ ... })} The function is immediately fired on render not on click. This is because you are calling the function instead of passing it to the onclick handler so your edit is incorrect

Collectives™ on Stack Overflow

React component not rerendering after array inside object has items pushed to it

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related