CODEWITHSUNDEEP
reactjssparklines
ScreamX
ScreamX

Reputation: 339

SparkLines ReactJS - Received NaN

Trying to figure out ReactJS. Namely, it came to the moment when SparkLines should be done. But for some reason Does not display the value. What could be wrong?

JSON:

[
    {
        "playersCount": "41170",
        "playersCountToday": "41",
        "playersCountAll": "45232",
        "countDailyChecksAll": [
            "41",
            "125",
            "68",
            "26",
            "41",
            "41",
            "66"
        ]
    }
]

Code:

class CountMain extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            post: []
        };
    }

    componentDidMount() {
        this.fetchPost();
        this.timer = setInterval(()=> this.fetchPost(), 5000)
    }

    componentWillUnmount() {
        clearInterval(this.timer);
    }    

    async fetchPost() {
        fetch('https://example.com/json')
        .then(res => {
            return res.json();
        })
        .then(data => {
            this.setState({
                post: data
            });
        })
        .catch(err => {
            console.log(err);
        });
    }

    render() {
        const playersCount = this.state.post.length === 0 ? <span><i className="fas fa-spinner fa-spin"></i></span> : <span>{this.state.post[0].playersCount}</span>;
        const playersCountToday = this.state.post.length === 0 ? <span><i className="fas fa-spinner fa-spin"></i></span> : <span>{this.state.post[0].playersCountToday}</span>;
        const playersCountAll = this.state.post.length === 0 ? <span><i className="fas fa-spinner fa-spin"></i></span> : <span>{this.state.post[0].playersCountAll}</span>;

        const countDailyChecksAll = this.state.post.length === 0 ? 0 : this.state.post[0].countDailyChecksAll.join(',');
        //console.log(countDailyChecksAll);

        return (
            <div className="row">
                <div className="col-xl-3 col-md-6 col-sm-12">
                    <div className="box-playerCount rcc--stats">
                        <div className="box-cont">
                            <img className="unselectable" src="myimage.jpg" />
                            <h3 className="box-title">Test Column</h3>
                            <ul className="list-inline two-part">
                                <li>
                                    <Sparklines data={[{countDailyChecksAll}]} margin={6}> //this line error
                                        <SparklinesLine style={{ strokeWidth: 6, stroke: "#4c90e5", fill: "none" }} />
                                    </Sparklines>                                    
                                </li>
                                <li className="numbers text-right animated fadeInLeft">
                                    {playersCountAll}
                                </li>
                            </ul>                                
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

Errors:

Warning: Received NaN for the cy attribute. If this is expected, cast the value to a string.

Error: attribute cy: Expected length, "NaN".

react-dom.development.js:2323 Error: attribute points: Expected number, "6 NaN".

console.log OUTPUT:

41,125,68,26,41,41,66

What am I doing wrong?

Upvotes: 0

Views: 773

Answers (2)

Sulthan
Sulthan

Reputation: 130191

data is supposed to be an array of numbers. You have an array of strings which you are converting into a single, comma separated String and then you wrap it into an array. That's incorrect.

// convert to numbers
const countDailyChecksAll = this.state.post[0].countDailyChecksAll.map(parseFloat);

<Sparklines data={countDailyChecksAll} ... >

Upvotes: 1

Alex
Alex

Reputation: 3991

In react, you should define your dynamic variable in Sate

State is a JavaScript object that stores a component's dynamic data and determines the component's behaviour. Because state is dynamic, it enables a component to keep track of changing information in between renders and for it to be dynamic and interactive.

for example instead of 

const countDailyChecksAll = this.state.post.length === 0 ? 0 : 
this.state.post[0].countDailyChecksAll.join(',');

useing like:

 this.setState({countDailyChecksAll: this.state.data[i].countDailyChecksAll})

temporary code sandbox sample

Upvotes: 1

Related Questions