CODEWITHSUNDEEP
javascriptreactjssocket.ioreact-hooks
david michael
david michael

Reputation: 45

React Hooks & UseEffect not updating display with socketIO data. Only renders elements in array

import React, {useState, useEffect} from 'react';
import socketIO from 'socket.io-client';
import Container from 'react-bootstrap/Container';


function Sock() {
   const [textData, setTextData] = useState([]);

   useEffect(() => {
      const socket = socketIO('http://127.0.0.1:5009');
      socket.on('chat message', (text)  =>  {
         setTextData([
            textData.push(text)
         ]);
         console.log(textData);
      });
   },[]);

  return (
      <Container>
         <h1>Socket</h1>
            {textData.map((text) => <li>{text}</li>)}
      </Container>
  ); 
}

export default Sock;

With help I have managed to display something on the UI but it currently only displays the array count and not the object inside the array. I am fairly new to React hooks any help or suggestions would be greatly appreciated.

Upvotes: 1

Views: 484

Answers (2)

Mos&#232; Raguzzini
Mos&#232; Raguzzini

Reputation: 15821

You have to join your data (text) with existing data (textData), try with:

setTextData([...textData, text]);

Upvotes: 2

dance2die
dance2die

Reputation: 36895

There are few ways to take care of stale closure but for your simple case, you can use the functional update syntax to get the previous text data, and return a new instance of array (do not mutate existing state, using push).

  useEffect(() => {
    const socket = socketIO("http://127.0.0.1:5009");
    socket.on("chat message", text => {
      setTextData(previousTextData => [...previousTextData, text]);
    });
  }, []);

Using the callback approach, you don't need to put textData in the useEffect's dependency array.

Upvotes: 4

Related Questions