ReactJS - Cannot read property 'preventDefault' of undefined

You should bind this event to "handleClick()" function. As follows,

<GiphyButton onClick={this.handleClick.bind(this)}/>

Not the answer to my question, but I ended up changing the function to handleSubmit and passing this into a form, which my button sits in. This worked.

You should just pass function -handleClick and not call it

render() {
    return (
      <BrowserRouter>
        <main>
          <Navbar />
          <Header />
          <GiphyButton handleClick={this.handleClick}/>
        </main>
      </BrowserRouter>
    );
  }

That was preventing event object to be passed causing undefined error.

Change code for GiphyButton with following to pass onclick method -

import React from 'react';

const GiphyButton = (props) => (

  <section>
    <button onClick={props.handleClick}>See more otters</button>
  </section>
);

export default GiphyButton;