Js substring doesn't work on react fetched string

Question

I've couldn't find answer on google so I though you guys might help me out.

So I've tried componentWillMount(), componentDidMount() but it appears substring method gets called before I received fetched string.

import React, { Component } from 'react';
import axios from "axios";

class Home extends Component {
    constructor(props){
        super(props);
        this.state = {
            reminders: [{}],
            test: "test"
        };
    }

    getReminders(){
        fetch('/api/reminder/',{method:"GET"}).then(resp => resp.json()).then(data => 
            this.setState({reminders:data}));
    }

    componentWillMount(){
        this.getReminders();
    };

    render() {
        return (
            <div className="main-table">
                { this.state.reminders.map((x,i) => 
                <div key={i} className="table-item">
                    <div className="item-name">{x.title}</div>
                    <div className="item-content flex">
                        <div className="time">{x.from.substr(11,2)} - {x.to}</div>
                        <div className="location">{x.location}</div>
                    </div>
                </div>) }
            </div>
        );
    }
}

export default Home;

Initialize your reminders array to an empty array instead of an array with an empty object. — Tholle
– Tholle, Commented Aug 13, 2018 at 19:56

charlietfl · Accepted Answer · 2018-08-13 19:57:00Z

2

Take the empty object out of reminders in state so the array has no initial length

That is giving the array a length of 1 to start with and the properties you are looking for inside map() don't exist on that specific object

    this.state = {
        reminders: [],
        test: "test"
    };

answered Aug 13, 2018 at 19:57

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sergii Vorobei · Accepted Answer · 2018-08-13 19:58:27Z

1

The reason is that you initialize this.state.reminders with not empty array, but with array with empty object, which caused err when you are accessing it props You can either initialize with empty array, e.g.

this.state = {
        reminders: []
}

Or you can add some property, e.g. isRemindersLoaded which initially set to false, and only render table after it has been set to true, e.g:

this.setState({reminders:data, isRemindersLoaded: true}));

answered Aug 13, 2018 at 19:58

Sergii Vorobei

1,50713 silver badges19 bronze badges

Collectives™ on Stack Overflow

Js substring doesn't work on react fetched string

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related