Hey guys help me to done with this, I have an state like this :
this.state = {arr:[1,2,3]}
How to push a new value to that array of state, for example I want to push this value : addArr = [4,5,6]
-
I think the basics of React state, including things like adding an item to an array (like the canonical "todos" example), are covered pretty well in essentially every React tutorial that has any state management.Dave Newton– Dave Newton2020-01-23 21:55:08 +00:00Commented Jan 23, 2020 at 21:55
-
@DaveNewton It's not mentioned in the official React docs.Brandon Dyer– Brandon Dyer2020-01-23 22:00:04 +00:00Commented Jan 23, 2020 at 22:00
-
@BrandonDyer Which isn't a React tutorial. SO isn't a tutorial site or replacement for due diligence. (Although IIRC it does explicitly state not to modify state directly, which in the case of things like an array, means either destructuring or a deep copy by definition.)Dave Newton– Dave Newton2020-01-23 22:13:56 +00:00Commented Jan 23, 2020 at 22:13
-
@DaveNewton The official React tutorial isn't a tutorial? And the state docs for completenessBrandon Dyer– Brandon Dyer2020-01-24 02:06:45 +00:00Commented Jan 24, 2020 at 2:06
-
The React docs, which is what you referenced, aren’t a tutorial—tutorials may be part of documentation, but they’re not the same thing. I replied to what you said—not what, perhaps, you meant. And the state docs explicitly state not to mutate state directly. My point that SO isn’t a tutorial still stands. OP did not perform due diligence.Dave Newton– Dave Newton2020-01-24 02:40:14 +00:00Commented Jan 24, 2020 at 2:40
Add a comment
|
3 Answers
You can accomplish this with destructuring
this.setState(
(state) => ({
arr: [...state.arr, x]
})
);
4 Comments
arga wirawan
hey, how to replace x using data outside that setState. I have try using data for example : const y = "this is data" that i define outside the setState and then I put it inisde setState instead of x, but the result is it provide a new item with value of undefined
Brandon Dyer
Whatever value you have in the position of
x will be inserted. It sounds like your value may have been out of scopearga wirawan
I dont know why the value is always undefined, but FYI I have to setState inside loop for, is it caused by this ?
Brandon Dyer
Yes, that can be a cause.
setState doesn't actually update the state immediately. It would be better to use the for loop to generate the data first, then insert that data after.You should never edit directly the state object as this.state.arr.push(...), instead you should you should replace entirely the state with this.setState(...) being a pure function.
In this case you can
this.setState({arr: [...state.arr, addArr]})
1 Comment
Brandon Dyer
You should also make sure you receive the current state as a parameter in the
setState lambda instead of relying on this.state as it may have changed by the time you get to running setState.using the useState() this should always work:
var [firstArray, setFirstArray] = useState([1, 2, 3]);
var secondArray = [4, 5, 6]
const fun = () => {
setFirstArray((e) => [...e, ...secondArray])
}
fun()
as e representing the old value of firstArray
