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, Nov 25 '20 at 16:31
Please read [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) 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, Nov 25 '20 at 16:34
Does this answer your question? [Correct way to push into state array](https://stackoverflow.com/questions/37435334/correct-way-to-push-into-state-array) — Brian Thompson, Nov 25 '20 at 16:35
@RajaJaganathan. Technically it works? but it nests the arrays deeper into each other [like this](https://imgur.com/a/TlG7YA8) — Pacholoamit, Nov 25 '20 at 16:40
Can you share your transactionDataArray shapes? Also, your transactionDataArray is a complex object probably you could try to use useReducer than useState. — Raja Jaganathan, Nov 25 '20 at 16:51
@RajaJaganathan Here [you go](https://imgur.com/a/27npChu) As you can see, I'm getting multiple objects. I want to store those objects and turn it into an array so I can use the map method, — Pacholoamit, Nov 25 '20 at 16:58
@Pacholoamit You did not follow the Raja's instructions.. Your image shows you spreading into an object, it must be an array. — Brian Thompson, Nov 25 '20 at 17:09

score 5 · Accepted Answer · answered Nov 25 '20 at 16:56

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 '20 at 16:56

Jay Motka

204
1
4

1

You've solved it. Thanks. I would've never thought to do it this way. – Pacholoamit Nov 25 '20 at 17:02
1

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]`. – Brian Thompson Nov 25 '20 at 17:07
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. – Pacholoamit Nov 25 '20 at 17:26

score 0 · Answer 2 · answered Nov 25 '20 at 16:34

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 '20 at 16:34

VenRus

41
1
9

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 – Pacholoamit Nov 25 '20 at 16:42

Can you use array.push in useEffect? React Hooks

2 Answers2

Linked