title: React Native: Inserting new object inside Array
body: <p>after successfully implementing sockets, i can now listen to my event from one screen to another. My problem now is that i want to display the new object that i obtained inside my flatlist.</p>
  <p>Here is the new msg object:</p>
  <p><code>messages: Object { &quot;conversationId&quot;: 33, &quot;message&quot;: &quot;Heyy&quot;, &quot;receiverId&quot;: 43, &quot;senderId&quot;: 53, }</code></p>
  <p>Here is my code:</p>
  <pre><code>const [listings, setListings] = useState([]);
  
  const loadListings = async () =&gt; {
  setLoading(true);
  const response = await messagesApi.getMessages();
  setLoading(false);
  if(refreshing) setRefreshing(false);
  if (!response.ok) return setError(true);
  setError(false);
  setListings(response.data)
  };
  
  useEffect(() =&gt; {
  const newsocket = sockets(user.id);
  setSocket(newsocket);
  newsocket.on(&quot;send_message&quot;, (msg) =&gt; {
    console.log(&quot;messages:&quot;, msg);
    setListings(listings =&gt; [...listings,msg]);
  });
  loadListings()
  }, []);
  
  return (
  &lt;FlatList
      data={listings}
      keyExtractor={(listing) =&gt; listing.id.toString()}
      renderItem={({ item,index }) =&gt; (
        &lt;MessagesList
        title={item.Listing.title}
          subTitle={item.Messages[0].message}
          imageUrl={item.images[0].url}
          thumbnailUrl={item.images[0].thumbnailUrl}
          // onPress={() =&gt; console.log(&quot;message selected&quot;, item)}
          onPress={() =&gt; navigation.navigate(routes.CHAT, 
                   {message:item,index,updateView,newsocket:socket})}
        /&gt;
      )}
    /&gt;
  )
  </code></pre>
  <p>When i run this code i keep getting <code>TypeError: undefined is not an object evaluating listing.id.toString</code>.</p>
  <p>I think i am getting this error since this new message object wants to get rendered live without getting it for database and hence it is still not given an id.</p>
  <p>How do i go ahead and fix this?</p>
  <p><em><strong>Additional info</strong></em></p>
  <p>console.log(listings[0]) prints this</p>
  <pre><code>Object{ 
          &quot;id&quot;:33,
         &quot;Listing&quot;:{    
                    &quot;title&quot;: &quot;test&quot;,
                   },
         &quot;Messages&quot;:Array[
                    Object {
                            &quot;conversationId&quot;: 33,
                            &quot;id&quot;: 601,
                            &quot;message&quot;: &quot;Hey&quot;,
                            },
                     Object {
                            &quot;conversationId&quot;: 33,
                            &quot;id&quot;: 600,
                            &quot;message&quot;: &quot;Hey&quot;,
                            },
                          ],
          &quot;images&quot;:Array[
                   Object {&quot;url&quot;:&quot;&quot;,&quot;thumbnailUrl&quot;:&quot;&quot;}]
        }
  </code></pre>
  <p>console.log(listings.map(x=&gt;x.Messages))</p>
  <pre><code> Array[
         Array[
                    Object {
                            &quot;conversationId&quot;: 33,
                            &quot;id&quot;: 601,
                            &quot;message&quot;: &quot;Hey&quot;,
                            },
                     Object {
                            &quot;conversationId&quot;: 33,
                            &quot;id&quot;: 600,
                            &quot;message&quot;: &quot;Hey&quot;,
                            },
              ],
        Array[
                    Object {
                            &quot;conversationId&quot;: 1,
                            &quot;id&quot;: 2,
                            &quot;message&quot;: &quot;Hey&quot;,
                            },
                     Object {
                            &quot;conversationId&quot;: 1,
                            &quot;id&quot;: 1,
                            &quot;message&quot;: &quot;Hey&quot;,
                            },
               ],
           ],
  </code></pre>
  <p>I also tried this</p>
  <pre><code> useEffect(()=&gt;{
   const x =listings.map(x=&gt;x.id)
   console.log(x)
   },[listings])
  </code></pre>
  <p>this prints out the following:</p>
  <pre><code>Array [
  32,
  33,
  29,
  15,
  27,
  25,
  26,
  4,
  17,
  ]
  </code></pre>
  <p>I just now need to check for the specific conversation before adding my msg object to it.</p>