ReactJS - Cannot read property 'preventDefault' of undefined

Question

Trying to do a simple onClick event/function, in ReactJS.

When the button is clicked, I want to run a function called "onClick", but I get this error in console:

app.js:62 Uncaught TypeError: Cannot read property 'preventDefault' of undefined

Have googled, but not sure what I'm going wrong. I've looked at ReactJs documentation and this looks correct, but obviously not. Here's my code:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter} from 'react-router-dom';
import axios from 'axios';

import Navbar from './components/Navbar';
import Header from './components/Header';
import GiphyButton from './components/GiphyButton';
import './assets/sass/main.scss';

class App extends React.Component {

  constructor() {
    super();

    this.state = {
      giphy: []
    };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    e.preventDefault();

    console.log('giffy button clicked');
    axios.get('http://api.giphy.com/v1/gifs/search?q=otters&api_key=<API KEY>')

      .then(res => {
        this.setState({ giphy: res.data });
        console.log(res.data);
      });
  }

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

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

GiphyButton is a component, which is literally, just JSX for a . No other functions running here:

import React from 'react';

const GiphyButton = () => (

  <section>
    <button>See more otters</button>
  </section>
);

export default GiphyButton;

Thank you.

Solution 1

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.

Solution 2

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

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

Solution 3

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;

Comments

[Reena Verma]

HI @Vivek - I did try that before. I dont receive an error in console, but the button doesn't work. If I click on it the function doesn't run at all...

[Vivek]

@ReenaVerma i've added code for GiphyButton as well so that it will call handleClick function

[Reena Verma]

does button need to sit in a form?

[Reena Verma]

Ok, so I've tried catching the errors and nothing console logs. the button just doesn't seem to run the function at all. I know the approach is correct, but I'm not sure what else is running, other than the original error I was getting...

[ugrpla]

can you post your current code? what is different from the code example that i sent?

[Reena Verma]

Hi @ugrpla - it's exactly as above. However my button jsx, doesn't sit in the same file. It sits in a seperate component called "GiphyButton". You can see I'm calling it here: import GiphyButton from './components/GiphyButton';

[ugrpla]

Hi @ReenaVerma - if it's exactly like above, then your button component in GiphyButton has no onClick at all. Pass the clickHandler as property down to your GiphyButton, and call it with <button onClick={props.handleClick}>See more otters</button>

[Jonathan Rys]

It's not generally recommended to bind this to functions here. It's better to use arrow functions which already have the correct this in scope or do what you have here in the constructor. medium.freecodecamp.org/…