Get data from websocket and put it in state - reactjs

Question

I want to get data from https://finnhub.io/docs/api/websocket-trades.
console.log is working, but I can't get it rendered to the screen.
Here are the code for example:
// function to get websocket's data
const streamingStockPrice = (symbol) => {
const socket = new WebSocket('wss://ws.finnhub.io?token=c7d2eiqad3idhma6grrg');
// Connection opened -> Subscribe
socket.addEventListener("open", function (event) {
socket.send(JSON.stringify({ type: "subscribe", symbol }));
});
// Listen for messages
const stockPrice = socket.addEventListener("message", function (event) {
const str = event.data;
const currentStockPrice = str.substring(
str.indexOf(`"p"`) + 4,
str.indexOf(`,"s"`)
);
console.log(
"Message from server ",
str.substring(str.indexOf(`"p"`) + 4, str.indexOf(`,"s"`))
);
return currentStockPrice;
});
// Unsubscribe
var unsubscribe = function (symbol) {
socket.send(JSON.stringify({ type: "unsubscribe", symbol: symbol }));
};
return stockPrice;
};
export default streamingStockPrice;
// render to screen
import streamingStockPrice from "./streamingStockPrice";
const toScreen = () => {
const [stockPrice, setStockPrice] = useState("");
useEffect(() => {
setStockPrice(streamingStockPrice("GME"));
}, [stockPrice]);
return (
<div>
<h4>${stockPrice}</h4>
</div>
);
};
Please help. I appreciate it!

Answer 1

First I want to warn you, this bit of code will create an infinite loop. What you are saying here is, if the stockPrice changes than set the stockPrice.
const [stockPrice, setStockPrice] = useState(""); useEffect(() => { setStockPrice(streamingStockPrice("GME")); }, [stockPrice]);
Now that's out of the way, since you are using react you should create a component for displaying the stockPrice and pass the setStockPrice to the component. Like shown below:
const streamStockPrice = (symbol, setStockPrice) => { setStockPrice(currentStockPrice) }
This way you set the stockprice in your main component and can use/show it there.