ReactJS Socket.io Convert json.stringify to json object - json

Question

JSON.Parse throws errors!
I am currently passing data in through a socket, and I can successfully read the data, but using it as a json object is giving me a lot of troubles. Here is my code
import React, { Component } from "react";
import socketIOClient from "socket.io-client";
class App extends Component {
constructor() {
super();
this.state = {
response: false,
endpoint: "http://127.0.0.1:4001"
};
}
componentDidMount() {
const { endpoint } = this.state;
const socket = socketIOClient(endpoint);
socket.on("message", mi => this.setState({ response: mi }));
}
render() {
const { response } = this.state;
const data = response.cc
return (
<div style={{ textAlign: "center" }}>
{
JSON.stringify(data)
}
</div>
);
}
}
export default App;
I am using jsonfile to read the file and check for changes, if so, push them through. Without using the JSON.stringify function, the page I am currently working in throws an error " If you meant to render a collection of children, use an array instead."

Answer 1

Reason why it is throwing the error is, because the initial value is boolean, and you are trying to run loop on any property of boolean, Here:
const { response } = this.state; // response = false
const data = response.cc // data will be undefined
data.map(.....) // can't read property map of undefined
Solution:
1- One option is skip the rendering until you didn't get the data from server.
Like this:
render(){
if(!this.state.response)
return <div>Loading...</div>
return(....)
}
2- Other option is, define the response as an object instead of boolean in the state, and use || [] with response.cc.
Like this:
constructor() {
super();
this.state = {
response: {},
endpoint: "http://127.0.0.1:4001"
};
}
Render the array using #array.map, Like this:
render() {
const { response } = this.state;
const data = response.cc || [];
return (
<div style={{ textAlign: "center" }}>
{
data.map(el => (
<div key={el.id}>
<p>Rank: {el.rank}</p>
<p>Price: {el.price_usd}</p>
</div>
))
}
</div>
);
}