title: Adding an object to an array (with Hooks in React)
body: <p>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,</p>
  
  <p>I tried this :</p>
  
  <pre><code>setMessages([...messages, newMessage]);
  </code></pre>
  
  <p>Here is more of the code :</p>
  
  <pre><code>const [messages, setMessages] = useState(false);
  
  useEffect(() =&gt; {
      socket.open();
  
      loadMessages();
  
      return () =&gt; {
        socket.close();
      };
    }, []);
  
  useEffect(() =&gt; {
      socket.on("send message", data =&gt; {
        setMessages([...messages, data]);
      });
  
      socket.on("delete message", data =&gt; {
        setMessages(messages.filter(message =&gt; 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);
      }
    }
  
  </code></pre>
  
  <p>but I got the <strong>TypeError: "messages is not iterable"</strong>,</p>
  
  <p>can someone help me? thank you !</p>