React click button to render the page

Question

In the renderList() , I have a delete button that will delete the content once it is clicked. I am not sure where to put the setState so I put it inside on the onClick() . This doesn't work. I would like to know if I am doing this correct or if there is a better way to solve this.

onClick Function

onClick={() => {
     this.props.deleteBook(list.book_id);
     this.setState({delete: list.book_id});
}}>

React.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { selectUser } from '../actions/index.js';
import { deleteBook } from '../actions/index.js';
import _ from 'lodash';

class myPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            delete: 0
        }
    }

    componentWillMount() {    
        this.props.selectUser(this.props.params.id);
    } 


    renderList() {
          return this.props.list.map((list) => {
            return (
                <li className='book-list'
                    key={list.book_id}>
                        {list.title}
                        <button
                        value={this.state.delete}
                        onChange={this.onClickChange} 
                        onClick={() => {
                            this.props.deleteBook(list.book_id);
                            this.setState({delete: list.book_id});
                        }}>
                        Delete
                        </button>

                </li>
            );
        })
    }

    render() {
        const {user} = this.props;
        const {list} = this.props;
        if(user) {

            return(
                <div>
                    <h2>Date Joined: {user.user.joined}</h2>
                    <h1>My Page</h1>
                    <h2>Username: {user.user.username}</h2>
                    <div>My Books:
                            <h1>
                                {this.renderList()}
                            </h1>
                    </div>
                </div>
            )
        }
    }
}
function mapStateToProps(state) {
    return {
        user: state.user.post,
        list: state.list.all
    }
}
export default connect(mapStateToProps, { selectUser, deleteBook })(myPage);

Answer 1

Based on your use of mapStateToProps , seems like you are using Redux. Your list of books comes from the Redux store as props which is external to the component.

You do not need this.state.delete in the component. As state is managed by Redux, it seems like the bug is in your Redux code and not React code. Look into the reducers and ensure that you are handling the delete item action correctly.