update array of objects using useEffect in React Hooks

Question

I have the following array that include objects using React, this array display the users fields data in a specific page.

What is the right way to update this component using useEffect, specifically the array on load of the page before data are rendered, to include:

new element to push in the array

(on load of the page)

userData.splice(3, 0,
        {
          key: "gender",
          label: "DFR",
        },
    );

Initial Array

  const userData = [
    {
      key: "first_name",
      label: "XYZ",
    },
    {
      key: "last_name",
      label: "XYYZ",
    },
    {
      key: "username",
      label: "ABC",
    },
    {
      key: "age",
      label: "ABCC",
    },
    {
      key: "nationality",
      label: "EDP",
    },
  ];

I have tried the following but for some reason it wont work:

  useEffect(() => {
    userData.splice(3, 0,
        {
          key: "gender",
          label: "DFR",
        },
    );
  }), [];

P.S: As you can see, i don't intend to use push.

@Ezrab_ i am using splice instead because i want the data to be displayed at a specific position, also i need that logic to be triggered on load of the page — John D
– John D, Commented Jan 1, 2021 at 16:40
I didn't completely understand what you want to do. You want to modify the initial array and use the new value BEFORE the component has rendered initially? If that is so, you can't do that with a hook, as hooks are run after components are already rendered. The effect of the useEffect hook will present itself AFTER the initial rendering. — zhulien
– zhulien, Commented Jan 1, 2021 at 16:42
Also, are the items you want to insert into the array available to the component or are they fetched from somewhere? — zhulien
– zhulien, Commented Jan 1, 2021 at 16:49
@zhulien thats correct, what you described is exactly what i was trying to accomplish, also the new item is mentioned above in the post. not fetched from elsewhere. — John D
– John D, Commented Jan 1, 2021 at 17:05

Nghi Nguyen · Accepted Answer · 2021-01-01 16:49:46Z

1

Yes cause you just update directly in the variable userData. If you want React rerender you should use setState

    const [userData, setUserDate] = useState(initialData)
    
    useEffect(() => {
        setUserDate(userData.splice(3, 0,
            {
              key: "gender",
              label: "DFR",
            },
        ))
   }), [];

answered Jan 1, 2021 at 16:49

Nghi Nguyen

9586 silver badges11 bronze badges

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

Comments

RobC · Accepted Answer · 2021-01-02 16:45:34Z

1

Maybe the better way is to use ES6 spread syntax.

useEffect(() => {
    userData = [...userData,{key: "gender",
          label: "DFR"}]
    );
  }), [];

edited Jan 2, 2021 at 16:45

RobC

25.3k21 gold badges87 silver badges88 bronze badges

answered Jan 1, 2021 at 16:40

Alexander Gordon

1393 bronze badges

Comments

zhulien · Accepted Answer · 2022-09-30 19:03:37Z

You don't need to use an effect for that (actually, quite on the contrary - you shouldn't).

useEffect is a hook that gets called after the initial rendering of the component.

In your case, you just simply need to generate a set of fields in the form of an array to be used for the component rendering. If those fields are static, not changing and are always the same for the given component, you just encapsulate them in a normal variable in the component itself and then you use them in the rendering. As simple as that.

On the other hand, if they're non-static and different instances of the same component can have a different set of fields - calculate them in the parent component and pass them down as props.

If, however, the fields can change dynamically throughout component's lifetime, you need to use state. Once again, you simply assign the calculated field set to the initial state and you're done.

In all of those cases, you'll get your fields ready before the render phase has happened.

Collectives™ on Stack Overflow

update array of objects using useEffect in React Hooks

new element to push in the array

Initial Array

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

new element to push in the array

Initial Array

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related