how to set state array using react hooks
Solution 1
To insert new element at the end of the list
const addMessage = (newMessage) => setMessages(state => [...state, newMessage])
To insert new element at the begining of the list
const addMessage = (newMessage) => setMessages(state => [newMessage, ...state])
Solution 2
More readable and cleaner solution it would be:
Create a variable that holds a copy of the actual state:
If state is an array and you need to add an element in it
const newState = [...messages, 'Hi buddy'];
setMessages(newState);
or
setMessages(prevState => [...prevState, "Hi Buddy"]);
If state is an object and you need to update a property in it
const newState = Object.assign({}, message, {name: 'Michael Scott'});
setMessages(newState);
or
setMessages(prevState => {...prevState, name: "Michael Scott" });
Solution 3
There is no real need to use the prevState, you could just do:
setMessages([...messages, newMessage])
Solution 4
Your state is an array so you will need to spread your previous state into a new array and add the new message using [...prevState, newMessage]
What you try to do is return an object, because {}
is a code block so you need to wrap it inside ()
if you return an object which is what you are trying to do
setMessages(prevState => [...prevState, newMessage])
Ankit Jayaprakash
Updated on August 05, 2022Comments
-
Ankit Jayaprakash almost 2 years
Thanks in advance. I have a state array as below.
I need to add an item to state array, I came across that we need not do state mutation. How do i set state with prevState.
const [messages, setMessages] = React.useState( [ { _id: 12, createdAt: new Date(), text: 'All good', user: { _id: 1, name: 'Sian Pol', } }, { _id: 21, createdAt: "2019-11-10 22:21", text: 'Hello user', user: { _id: 2, name: 'User New' } }] )
How to to i call the set State to append this state array.
Something like this?
setMessages(previousState => ({...stat
Can anyone help me in getting the above line code.