how to set state array using react hooks

Question

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.

Does this answer your question? Push method in React Hooks (useState)? — tolotra
– tolotra, Commented Nov 30, 2019 at 16:15

tolotra · Accepted Answer · 2022-09-27 17:04:12Z

44

To insert new element at the end of the list

const addMessage = (newMessage) => setMessages(oldMessages => [...oldMessages, newMessage])

To insert new element at the begining of the list

const addMessage = (newMessage) => setMessages(oldMessages => [newMessage, ...oldMessages])

edited Sep 27, 2022 at 17:04

answered Nov 29, 2019 at 8:03

tolotra

3,2701 gold badge13 silver badges19 bronze badges

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

1 Comment

Nate Kindrew Over a year ago

In my case, using push was an issue because I was returning the result from the push itself, which returns the new length of the array, not the array itself. setSelectedList(prevState => prevState.push(val)) will set the state object to the length of the array, in other words.

Astrit Spanca · Accepted Answer · 2021-02-05 09:33:39Z

15

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" });

edited Feb 5, 2021 at 9:33

answered Nov 29, 2019 at 9:10

Astrit Spanca

7246 silver badges15 bronze badges

4 Comments

Ankit Jayaprakash Over a year ago

I think this will mutate the state.

Astrit Spanca Over a year ago

It will not for sure

CatalinBerta Over a year ago

@AnkitJayaprakash That is what the ...spread operator does, make a copy, thus no mutation happens

Priyansh Gaharana Over a year ago

What are the consequences of one on another? Are both same performance wise?

Asaf Aviv · Accepted Answer · 2019-11-29 08:00:43Z

1

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])

answered Nov 29, 2019 at 8:00

Asaf Aviv

11.8k2 gold badges33 silver badges47 bronze badges

Comments

Pedram · Accepted Answer · 2022-12-24 18:59:09Z

1

setMessages(prevState => [...prevState, newMessage])

edited Dec 24, 2022 at 18:59

Pedram

16.7k10 gold badges47 silver badges73 bronze badges

answered Nov 29, 2019 at 9:06

Ankit Jayaprakash

1,1304 gold badges17 silver badges31 bronze badges

Comments

Konstantin · Accepted Answer · 2019-11-29 08:15:07Z

0

There is no real need to use the prevState, you could just do:

setMessages([...messages, newMessage])

answered Nov 29, 2019 at 8:15

Konstantin

1,4688 silver badges20 bronze badges

Collectives™ on Stack Overflow

how to set state array using react hooks

5 Answers 5

1 Comment

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related