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>
)
}
}