0

i'm pretty new to React and so I'm creating a simple app first. For me its a simple react timer. I finished the basic functionality of the timer and wanted to move on to work with APIs and the state.

I'm loading the available "recent timers" from the API and then put the minto the state and make it re-render.

Now I'm having a delete button for every entry of "recent timers". By clicking it, i'm getting the error message:

TypeError: this.state.recentTimers.map is not a function
    at RecentTimers.renderRecentTimerItems (transformed.js:32399)
    at RecentTimers.render (transformed.js:32433)
    at transformed.js:28263
    at measureLifeCyclePerf (transformed.js:27543)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (transformed.js:28262)
    at ReactCompositeComponentWrapper._renderValidatedComponent (transformed.js:28289)
    at ReactCompositeComponentWrapper._updateRenderedComponent (transformed.js:28213)
    at ReactCompositeComponentWrapper._performComponentUpdate (transformed.js:28191)
    at ReactCompositeComponentWrapper.updateComponent (transformed.js:28112)
    at ReactCompositeComponentWrapper.performUpdateIfNecessary (transformed.js:28028)

I thought of binding-issues but couldn't manage to fix it.

Here's the component:

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

import UIkit from 'uikit';
import Icons from 'uikit/dist/js/uikit-icons';

UIkit.use(Icons);

export default class RecentTimers extends Component {

  constructor() {
    super();
    this.state = {recentTimers: []};
  }

  componentDidMount() {
    Axios.get('http://rest.learncode.academy/api/svartberg/timers')
      .then((response) => {
        this.setState({recentTimers: response.data});
      })
      .catch(function (error) {
        UIkit.notification({
          message: 'Couldn\'t fetch recent timers.<br />' + error,
          status: 'danger',
          pos: 'bottom-right'
        });
      });
  }

  deleteRecentTimerItem(item) {
    Axios.delete('http://rest.learncode.academy/api/svartberg/timers/' + item.id)
      .then((response) => {
        this.setState({recentTimers: response.data});
      })
      .catch(function (error) {
        console.log(error);
        UIkit.notification({
          message: 'Couldn\'t delete timer with ID ' + item.id + '.<br />' + error,
          status: 'danger',
          pos: 'bottom-right'
        });
      });
  }

  renderRecentTimerItems() {
    return this.state.recentTimers.length > 0
      ? this.state.recentTimers.map((item, index) => (
        <li key={index}>
          {item.timestamp} ({item.seconds} Seconds)
          <span onClick={this.deleteRecentTimerItem.bind(this, item)} className="uk-float-right" style={{lineHeight: 'normal'}} data-uk-icon="icon: close"></span>
        </li>
      ))
      : <div className="uk-text-center"><span data-uk-spinner={''} /></div>;
  }

  render() {
    return (
      <div>
        <hr />
        <div className="uk-card uk-card-default uk-card-body">
          <h3 className="uk-card-title uk-text-center">Recent Timers</h3>
          <ul className="uk-list uk-list-divider">
            { this.renderRecentTimerItems() }
          </ul>
        </div>
      </div>
    )
  }

}
SVARTBERG
  • 435
  • 1
  • 7
  • 16
  • i think the response that you are getting is not an array, do `console.log('response.data', response.data)` and check the output inside delete function. – Mayank Shukla Jul 04 '17 at 10:20
  • @MayankShukla I dont get any response. I'm thrown into the catch block instantly. – SVARTBERG Jul 04 '17 at 10:28
  • 1
    Oops, my bad. I c&p'd from the Axios.get which sets the state to the object it receives as the response. In the .delete case I'll just get an 'OK' of course. So @MayankShukla was right. Thanks. – SVARTBERG Jul 04 '17 at 10:32

0 Answers0