how to re-render same page on a click in react

Question

I have written this code using react and redux

class BooksContainer extends Component {

    componentDidMount = () => {
        const category = this.props.category;
        this.props.searchBook(category);
        this.props.fetchBook();
    }
    handleClickPrevious = () => {
        console.log('clicked on previous: ' + this.props.previous)
        this.props.urlprev(this.props.previous)
    }
    handleClickNext = () => {
        console.log('clicked on next: ' + this.props.next)
        this.props.urlnext(this.props.next)
    }

    render() {
        const books = this.props.books;
        let content = books

        content = books.length > 0 ?
            books.map(({ subjects, formats, title, authors }, index) => {
                subjects = subjects.join()
                if (subjects.includes('fiction') === true || subjects.includes('Fiction') === true) {
                    return (<div key={index} className="col-md-3 mb-5" >
                        <div className="card card-body bg-dark text-center h-100">
                            <img className="w-100 mb-2" src={formats['image/jpeg'] || close} alt="Book Cover" />
                            <h5 className="text-light text-left card-title">
                                {title}
                            </h5>
                            <p className="text-light text-left">
                                {authors.map(({ name }) => name)}
                            </p>
                        </div>
                    </div>)
                }
            }
            )
            : null;
        return (
            <div>
                <div className="row">
                    {content}
                </div>
                <div>
                    <div className="d-flex justify-content-between">
                        <img className="bg-dark" src={left} alt="previous" onClick={this.handleClickPrevious} />
                        <img className="bg-dark" src={right} alt="next" onClick={this.handleClickNext} />
                    </div>

                </div>
            </div>
        )
    }
}

const mapStateToProps = state => ({
    books: state.books.books,
    next: state.books.next,
    previous: state.books.previous
})

export default connect(mapStateToProps, { searchBook, fetchBook, urlprev, urlnext })(BooksContainer);

in the return method when i click next or prev it should render books from next link provided by the api Api->http://skunkworks.ignitesol.com:8000/books. I want to re-render the same component with books obtained from the next or previous link. I tried using shouldComponentUpdate but it isnt working if i use shouldComponentUpdate then the current displaying books also do not render

Answer 1

Your component will automatically rerender on any dependency change that is props or state, you can also you this.forceUpdate() but this is highly unrecommended.

Given that your component is connected to the Redux store, dispatching a action to change you currently selected item will also trigger an component rerender. I would have currentlySelected in redux store as a variable which I would change and fetch via mapStateToProps into my component then you could use actions to trigger a change of the currentlySelected and thereby update your components props effectivly rerendering it