I implemented this component in my application, but due to some unknown reason I am unable to render it on UI. I copied the Pagination.js code and then imported that into my SearchResultsPage.js. Here is the code for that.
`
import React from "react";
import NavigationBar from "./NavigationBar";
import SearchPageResultsStyle from "../assets/css/SearchResultsPage.css"
import Pagination from "./Pagination";
class SearchResultsPage extends React.Component{
constructor(props) {
super(props);
console.log("Printing in the results component: this.props.location.state.data.keyword")
console.log(this.props.location.state.data.keyword)
this.state = {
results: this.props.location.state.data.results,
keyword: this.props.location.state.data.keyword,
pageOfItems: []
};
this.onChangePage = this.onChangePage.bind(this);
}
onChangePage(pageOfItems) {
// update local state with new page of items
this.setState({pageOfItems});
}
render() {
return(
<div>
<NavigationBar/>
<h4 style={{textAlign:'center', color:'#1a0dab'}}>Showing search results for <span style={{fontWeight:'bold', fontStyle:'Italic'}}>'{this.state.keyword}'</span></h4>
<hr/>
<div className={'wrap'} style={SearchPageResultsStyle}>
<div className={'fleft'}>left column</div>
<div className={'fcenter'}>
<h3 style={{color:'#1a0dab'}}>Tweeter tweets text will be displayed here!!!</h3>
<a href={'https://google.com'}>Tweet urls will be displayed here</a>
<br/>
<div style={{display:'inline'}}>
<p><span style={{fontWeight:'bold', textColor:'#6a6a6a'}}>topic: </span>crime</p>
<p><span style={{fontWeight:'bold', textColor:'#6a6a6a'}}>city: </span>delhi</p>
<p><span style={{fontWeight:'bold', textColor:'#6a6a6a'}}>lang: </span>Hindi</p>
<p><span style={{fontWeight:'bold', textColor:'#6a6a6a'}}>Hashtags: </span></p>
<hr/>
{this.state.pageOfItems.map(item =>
<div key={item.id}>{item.name}</div>
)}
<Pagination items={this.state.pageOfItems} onChangePage={this.onChangePage}/>
</div>
</div>
<div className={'fright'}>right column</div>
</div>
</div>
)
}
}
export default SearchResultsPage;`
I have asked this question on stackoverflow as well.https://stackoverflow.com/questions/54080735/pagination-component-not-rendered-on-ui-react
I implemented this component in my application, but due to some unknown reason I am unable to render it on UI. I copied the Pagination.js code and then imported that into my SearchResultsPage.js. Here is the code for that.
`
import React from "react";
import NavigationBar from "./NavigationBar";
import SearchPageResultsStyle from "../assets/css/SearchResultsPage.css"
import Pagination from "./Pagination";
class SearchResultsPage extends React.Component{
constructor(props) {
super(props);
console.log("Printing in the results component: this.props.location.state.data.keyword")
console.log(this.props.location.state.data.keyword)
this.state = {
results: this.props.location.state.data.results,
keyword: this.props.location.state.data.keyword,
pageOfItems: []
};
this.onChangePage = this.onChangePage.bind(this);
}
}
export default SearchResultsPage;`
I have asked this question on stackoverflow as well.https://stackoverflow.com/questions/54080735/pagination-component-not-rendered-on-ui-react