ReactJS with Sockets Nested JSON parsing data issue

Question

I have a JSON file that has a structure like this \"data.json\"

{
    \"Object1\": {
        \"name\": \"1\",
        \"rank\": \"2\"
    },
    \"Object2\": {
          


        

Answer 1

I don't know so much about sockets but since you are setting the state after the first render, there isn't any data until componentDidMount finishes its job. So, you need conditional rendering.

const data = {
  "Object1": {
    "name": "1",
      "rank": "2"
  },
  "Object2": {
    "name": "3",
      "rank": "4"
  }
};

const fakeRequest = () => new Promise( resolve => 
  setTimeout( () => resolve(data), 2000 )
);

class App extends React.Component {
  state = {
    data: null,
  };

  componentDidMount() {
    fakeRequest().then( data => this.setState({data}));
  }

  render() {
    return <div>
      {!this.state.data ? "No data yet, wait 2 seconds." : this.state.data.Object1.name }
    </div>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

You can't use {this.state.data} since a React child can't be object. You need to use the values of this object.