TypeError: Cannot read property 'map' of undefined at View.render (app.js:70994)

S

Syed Waqar

Guest
I have made a simple crud app using react with laravel. Add function is working perfectly but I am unable to view record I got error

TypeError: Cannot read property 'map' of undefined if anyone could help it would be appreciated here is my code

Example.js


import React, {Component} from 'react';


import ReactDOM from 'react-dom';
import Header from "./Header";
import Footer from "./Footer";

export default class Example extends Component {
render() {
return (
<div className="container">
<Header/>
I love React...
<Footer/>
</div>
);
}
}

if (document.getElementById('example')) {
ReactDOM.render(<Example/>, document.getElementById('example'));
}

Header.js


import React, {Component} from 'react';

// import {Link, Route} from "react-router-dom";
import {BrowserRouter as Router, Link, Route} from "react-router-
dom";


import View from "./View";
import Add from "./Add";
import Edit from "./Edit";


export default class Header extends Component {
render() {
return (


<div className="pos-f-t">
<div className="collapse"
id="navbarToggleExternalContent">
<div className="bg-dark p-4">
<h4 className="text-white">Collapsed
content</h4>
<span className="text-muted">Toggleable via
the navbar brand.</span>
</div>
</div>
<nav className="navbar navbar-dark bg-dark">




</nav>
<Router>
<Link to="/add" className="btn btn-dark" >Add</Link>
<Link to="/view" className="btn btn-dark" >View</Link>
<Route exact path="/add" component={Add}/>
<Route exact path="/view" component={View}/>
<Route exact path="/edit/:id" component={Edit}/>
</Router>
</div>


);
}
}

View.js


import React, {Component} from 'react';
import axios from 'axios';
import {BrowserRouter as Router, Link, Route} from "react-router-
dom";
// import {Link} from "react-router-dom";

// this is used for pagination
import Pagination from "react-js-pagination";
//end pagination here

export default class View extends Component {


constructor() {

super();
this.state = {

rssreads: [],

// this is used for pagination
activePage: 1,
itemsCountPerPage: 1,
totalItemsCount: 1,
pageRangeDisplayed: 5

//end pagination here
}


this.handlePageChange = this.handlePageChange.bind(this);
}


//didmount is used to render data
componentDidMount() {
axios.get('/view').then(response => {
this.setState({
rssreads: response.data.data,
activePage: response.data.current_page,
itemsCountPerPage: response.data.per_page,
totalItemsCount: response.data.total,

});

});
}

handlePageChange(pageNumber) {
console.log(`active page is ${pageNumber}`);
this.setState({activePage: pageNumber});

axios.get('/view?page=' + pageNumber).then(response => {
this.setState({
rssreads: response.data.data,
itemsCountPerPage: response.data.per_page,
totalItemsCount: response.data.total,
activePage: response.data.current_page,


});

});
}

//ondelete function to delte specific record
onDelete(url_id) {

axios.delete('delete/' + url_id).then(response => {


// this code is for live updating data after delete
var url = this.state.rssreads;

for (var i = 0; i < url.length; i++) {

if (url.id === url_id) {
url.splice(i, 1);

this.setState({rssreads: url});
}
}


});

}


render() {
return (

<div>
<table className="table">
<thead>
<tr>

<th>Title</th>
<th>Content</th>
<th>Link</th>
<th>Publish</th>
<th>URL</th>
<th>Action</th>
</tr>
</thead>
<tbody>


{

this.state.rssreads.map(rssreads => {

return (
<tr>
<td>{rssreads.title}</td>
<td>{rssreads.content}</td>
<td>{rssreads.link}</td>
<td>{rssreads.publish}</td>
<td>{rssreads.url}</td>
<td>
<Link to=
{`/edit/${rssreads.id}`}>Edit</Link>
<a href="#" onClick=
{this.onDelete.bind(this, rssreads.id)}>Delete</a></td>
</tr>
)
})
}
</tbody>
</table>


<div className="pagination justify-content-center">
<Pagination
activePage={this.state.activePage}
itemsCountPerPage=
{this.state.itemsCountPerPage}
totalItemsCount={this.state.totalItemsCount}
pageRangeDisplayed=
{this.state.pageRangeDisplayed}
onChange={this.handlePageChange}
itemClass='page-item'
linkClass='page-link'
/>
</div>


</div>


);
}
}


This error I got and view page is disappeared

Continue reading...
 
Top