Adding an object to an array (with Hooks in React)

Question

I want to add an object to an array in React using Hooks, I'm doing a chat, and I want to add a new message to the array of messages,

I tried this :

setMessages([...messages, newMessage]);

Here is more of the code :

const [messages, setMessages] = useState(false);

useEffect(() => {
    socket.open();

    loadMessages();

    return () => {
      socket.close();
    };
  }, []);

useEffect(() => {
    socket.on("send message", data => {
      setMessages([...messages, data]);
    });

    socket.on("delete message", data => {
      setMessages(messages.filter(message => message.id !== data.id));
    });
  });

async function loadMessages() {
    try {
      const dataMessages = await axios.get(
        `http://localhost:5000/api/chat/messages`
      );
      setMessages(dataMessages.data);
    } catch (error) {
      console.log(error);
    }
  }

but I got the TypeError: "messages is not iterable",

can someone help me? thank you !

Please show all the relevant code. where is messages created? What is its default value? — Davin Tryon
– Davin Tryon, Commented Oct 17, 2019 at 9:38
This works if messages is created as en empty array. let array = []; array = [...array, 'Hi']; — sebastienbarbier
– sebastienbarbier, Commented Oct 17, 2019 at 9:39
@DavinTryon messages default value is "false", and becomes an array with datas after the loadMessages() in the useEffect. I just added some code — VersifiXion
– VersifiXion, Commented Oct 17, 2019 at 9:41
@sebastienbarbier messages default value is "false", but after the function loadMessages is executed in the useEffect, it becomes an array with objects inside — VersifiXion
– VersifiXion, Commented Oct 17, 2019 at 9:42
It is an issue of incorrect typings. You should not assign it to false, even if you eventually assign it to an array. You are trying to spread/iterate a boolean value instead of an object/array. Use this instead: const [messages, setMessages] = useState([]); — wentjun
– wentjun, Commented Oct 17, 2019 at 9:44

ibtsam · Accepted Answer · 2019-10-17 09:43:54Z

2

You are setting messages as boolean value Change this

const [messages, setMessages] = useState(false);

to

const [messages, setMessages] = useState([]);

Then add elements to array, also dont mutate the messages array.

Hope it helps

answered Oct 17, 2019 at 9:43

ibtsam

1,7001 gold badge11 silver badges10 bronze badges

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

1 Comment

ibtsam Over a year ago

great, if it helped you feel free to up vote and accept the answer, cheers

Davin Tryon · Accepted Answer · 2019-10-17 09:43:34Z

2

Use a more appropriate default value (of the same type):

const [messages, setMessages] = useState([]);

Then, you will always be able to spread messages.

answered Oct 17, 2019 at 9:43

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

Comments

Ponpon32 · Accepted Answer · 2019-10-17 09:44:31Z

1

This happen because the initial value of messages is boolean and you can't spread it into the new messages array.

Try:

const [messages, setMessages] = useState([]);

answered Oct 17, 2019 at 9:44

Ponpon32

2,2102 gold badges16 silver badges26 bronze badges

1 Comment

Ponpon32 Over a year ago

Now all you need to do is to accept this amazing answer, slowly move your mouse to the check sign, click on it. @Versifiction

Abdullah Al Reza Rohan · Accepted Answer · 2021-01-02 18:44:42Z

0

Use: const [mesages, setMessages] = useState([]);

answered Jan 2, 2021 at 18:44

Abdullah Al Reza Rohan

664 bronze badges

1 Comment

Doj Over a year ago

Welcome to SO. Though we thank you for your answer, it would be better if it provided additional value on top of the other answers. In this case, your answer does not provide additional value, since ibtsam already posted that solution. If a previous answer was helpful to you, you should vote it up once you have enough reputation.

Collectives™ on Stack Overflow

Adding an object to an array (with Hooks in React)

4 Answers 4

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related