Pagination Component not rendering on UI

[siddhs]

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

[shchoy]

Did you include the bootstrap stylesheet in index.html ?

[c0ncentus]

up i download the project and make npm i ...I run it and display nothing ...

I integrate main files in tsx only the strings(item) is displayed and dont show pagination bar ...