Can you use array.push in useEffect? React Hooks

Question

I'm trying to figure out a way to add objects into my array. Here's the code.

export default function DashboardTable(props) {
    const { transactionData } = props;
    const classes = useStyles();
    const [transactionDataArray, setTransactionDataArray] = useState([])

 
  useEffect(() => {
    setTransactionDataArray(transactionDataArray.push(transactionData))
  }, [transactionData])

    console.log(transactionDataArray);

transactionData returns objects (the amount of objects is variable depending on the back end transactions.) I want to add the objects to the array transactionDataArray but I keep getting the error transactionDataArray is not a function. Where am I going wrong?

try like this setTransactionDataArray([...transactionDataArray, transactionData]) — Raja Jaganathan
– Raja Jaganathan, Commented Nov 25, 2020 at 16:31
Please read here about what Array.prototype.push actually does. It does not return the updated array, it returns the length of the new array. In addition, push mutates the original array which is against the rules of React state. — Brian Thompson
– Brian Thompson, Commented Nov 25, 2020 at 16:34
Does this answer your question? Correct way to push into state array — Brian Thompson
– Brian Thompson, Commented Nov 25, 2020 at 16:35
@RajaJaganathan. Technically it works? but it nests the arrays deeper into each other like this — Pacholoamit
– Pacholoamit, Commented Nov 25, 2020 at 16:40

Jay Motka · Accepted Answer · 2020-11-25 16:56:51Z

5

Yes, you can use push in useEffect but not on the state. React state can not be changed directly. As being a state you can not directly push or edit data of the state transactionDataArray. But with the help of setTransactionDataArray function you can change/set the state value. so for you to add new value to it's older state you have to destructure the old state and add the new value like below

setTransactionDataArray([...transactionDataArray, transactionData])

or you can do it like below by creating new variable assigning state's value and than push the new value to the variable and last set the state

const data = transactionDataArray;
data.push(transactionData);
setTransactionDataArray(data);

for more about react state read here

answered Nov 25, 2020 at 16:56

Jay Motka

2241 silver badge4 bronze badges

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

3 Comments

Pacholoamit Over a year ago

You've solved it. Thanks. I would've never thought to do it this way.

Brian Thompson Over a year ago

The second solution still mutates state, it just avoids the return value of length issue. You should never mutate state. You need to create a new array but following the first example, or spreading the previous values [...transactionDataArray].

Pacholoamit Over a year ago

Ahhh yes, I tried the 2nd solution of this post but it was always delayed by 1. I tried using the spread operator [...transactionDataArray, transactionData] and it worked perfectly. I'd for Raja to post his answer so I make it the official answer.

VenRus · Accepted Answer · 2020-11-25 16:34:27Z

0

To add data to your local state you don't have to use push but only "setTransactionDataArray" because that's the function that will add data to state.

So in your useEffect

  useEffect(() => {
    setTransactionDataArray(transactionData)
  }, [transactionData])

Or if you want to have an array with data then later add that array to state than you should declare an array and add data to it. Then when the job is done you can add that array in state.

answered Nov 25, 2020 at 16:34

VenRus

411 gold badge1 silver badge10 bronze badges

1 Comment

Pacholoamit Over a year ago

Yeah this only gets the latest object. So you'd be only getting the latest transaction from transactionData. I'm trying to get all of the data and add it into the array

Collectives™ on Stack Overflow

Can you use array.push in useEffect? React Hooks

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related