title: React: Adding event.preventDefault() Method Into Functional Component
body: <p>Currently I'm trying to avoid refreshing page by adding a <code>preventDefault()</code> call into the <code>onClick</code> handler of a functional component (<code>BookList</code> defined in bookList.js). I know I can make it with from class component to functional. However, is there any way to call <code>preventDefault()</code> in the <code>onClick</code> event handler in <code>BookList</code>? </p>
  
  <p>Here is my sample code:</p>
  
  <p><strong>BookListElement.js</strong></p>
  
  <pre><code>import React from 'react';
  import { connect } from 'react-redux';
  import BookList from '../components/bookList';
  import { deleteBook } from '../store/actions/projectActions';
  
  const BookListElement = ({books, deleteBook}) =&gt; {
    if(!books.length) {
      return (
        &lt;div&gt;
          No Books
        &lt;/div&gt;
      )
    }
    return (
      &lt;div&gt;
        {Array.isArray(books) ? books.map(book =&gt; {
          return (
            &lt;BookList book={book} deleteBook={deleteBook} key={book._id} /&gt;
          );
        }): &lt;h1&gt;something wrong.&lt;/h1&gt;}
      &lt;/div&gt;
    );
  };
  
  const mapStateToProps = state =&gt; {
    return {
      books: state.books
    };
  };
  
  const mapDispatchToProps = dispatch =&gt; {
    return {
      deleteBook: _id =&gt; {
        dispatch(deleteBook(_id));
      }
    };
  };
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(BookListElement);
  </code></pre>
  
  <p><strong>bookList.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  
  const styles = {
    borderBottom: '2px solid #eee',
    background: '#fafafa',
    margin: '.75rem auto',
    padding: '.6rem 1rem',
    maxWidth: '500px',
    borderRadius: '7px'
  };
  
  const BookList = ({ book: { author, publication, publisher, _id }, deleteBook }) =&gt; {
    return (
          &lt;form&gt;
            &lt;div className="collection-item" style={styles} key={_id}&gt;
              &lt;h2&gt;{author}&lt;/h2&gt;
              &lt;p&gt;{publication}&lt;/p&gt;
              &lt;p&gt;{publisher}&lt;/p&gt;
              &lt;button className="btn waves-effect waves-light" onClick={() =&gt; {deleteBook(_id)}}&gt;
                &lt;i className="large material-icons"&gt;delete_forever&lt;/i&gt;
              &lt;/button&gt;
           &lt;/div&gt;
         &lt;/form&gt;
    );
  };
  
  export default BookList;
  </code></pre>
  
  <p><strong>action.js</strong></p>
  
  <pre><code>export const deleteBookSuccess = _id =&gt; {
    return {
      type: DELETE_BOOK,
      payload: {
        _id
      }
    }
  };
  
  export const deleteBook = _id =&gt; {
    return (dispatch) =&gt; {
      return axios.delete(`${apiUrl}/${_id}`)
        .then(response =&gt; {
          dispatch(deleteBookSuccess(response.data))
        })
        .catch(error =&gt; {
          throw(error);
        });
    };
  };
  </code></pre>
  
  <p><strong>reducer.js</strong></p>
  
  <pre><code>case DELETE_BOOK:
        let afterDelete = state.filter(book =&gt; {
          return book._id !== action.payload._id
        });
        return afterDelete;
  </code></pre>