Render object in ReactJS

Hello There,

I did not write React for more than a year and i may have forgotten a lot (if not everything :slight_smile: )

I have a quick test for a job interview but i am stuck with the render of the following code,

can you please help?

import React, { Component } from 'react'
// import Data from '../d   ata/rates.json'
import io from 'socket.io-client/dist/socket.io';

import SimpleDateTime from 'react-simple-timestamp-to-date';

class RatesList extends Component {
    constructor() {
        super();
        this.state = {
            ratesList: []
        }
    }
    getDataList() {
        const io = require('socket.io-client');
        const socket = io('https://wss.live-rates.com/')
        var key = 'trial ' //YOUR LIVE-RATES SUBSCRIPTION KEY

        socket.on('connect', function () {
            socket.emit('key', key);
        });

        socket.on('rates', function (msg) {
            try {
                let obj = JSON.parse(msg);
                console.log(obj);
                this.setState({
                    ratesList: obj
                })
            } catch (e) {
                console.log(msg);
            }
        });
    }


    componentDidMount() {
        this.getDataList();
    }

    renderData() {
        this.state.ratesList.map((rates) => {
            return <div>
                <h1>Currency {rates.currency}</h1>
                <p> rate {rates.rate}</p>
                <p> bid {rates.bid}</p>
                <p> ask {rates.ask}</p>
                <p> high {rates.high}</p>
                <p> low {rates.low}</p>
                <p> open {rates.open}</p>
                <p> close {rates.close}</p>s
            <SimpleDateTime> date={rates.timestamp} </SimpleDateTime>

            </div>
        })
    }


    render() {
        return (
            <div>
                <h1>Hello There</h1>
                {this.renderData()}
            </div>
        )

    }
}


export default RatesList``` 

I see the connection running in the console but nothing in the html.

Do you know what i did do wrong ?


Thanks
1 Like

Just showing up to say good luck,
(too late here to think anything complicated :slight_smile:)

Well, it’s a little hard to dig into this without a working repo. It’s going to be impossible without a key or at least a sample of the shape of data being returned.

So, trying to work with what we have…

If I go here and look for sample data, I find this:

{
	Currency: "EUR/USD"        //Description of the Instrument 
	Rate: "1.13625"            //Same as BID (Deprecated)
	Bid: "1.13625"             //Bid Value of the Currency / Instrument
	Ask: "1.13638"             //Ask Value of the Currency / Instrument
	High: "1.14081"            //24H High of the Currency / Instrument
	Low: "1.13527"             //24H Low of the Currency / Instrument
	Open: "1.13725"            //Opening Value of the Daily Session / Previous Day if Market is Active
	Close: "1.13625"           //Closing Value of the Daily Session / Previous Day if Market is Active
	Timestamp: "1551477238763" //Timestamp of the Last Update
}

So, I assume that I am supposed to be an array of objects. That makes these lines a little odd:

                let obj = JSON.parse(msg);
                console.log(obj);
                this.setState({
                    ratesList: obj
                })

Since they seem to think you’re getting an object. But that’s labelling, moving on…

The properties in the given data are capitalized, but your’s are not. If I convert them over and make them the default data, I get:

    constructor() {
        super();
        this.state = {
            ratesList: [{
              currency: "EUR/USD",
              rate: "1.13625",
              bid: "1.13625",
              ask: "1.13638",
              high: "1.14081",
              low: "1.13527",
              open: "1.13725",
              close: "1.13625",
              timestamp: "1551477238763",
            }]
        }
    }

With that, it doesn’t display data. The problem is here:

    renderData() {
        this.state.ratesList.map((rates) => {
            console.log('asdf rates', rates);
            return (
              <div>
                <h1>Currency {rates.currency}</h1>
                <p> rate {rates.rate}</p>
                <p> bid {rates.bid}</p>
                <p> ask {rates.ask}</p>
                <p> high {rates.high}</p>
                <p> low {rates.low}</p>
                <p> open {rates.open}</p>
                <p> close {rates.close}</p>s
                <SimpleDateTime> date={rates.timestamp} </SimpleDateTime>
              </div>
            );
        })
    }

Notice that it doesn’t return anything. You map through the data, but the method renderData doesn’t return anything, or we could say that it returns undefined, which React just interprets as “don’t render anything”. If I change this to:

    renderData() {
        return this.state.ratesList.map((rates) => {
        // ...

Then I get that dummy data on the screen.