React onClick TypeError: Cannot read property 'value' of undefined

Question

I'm trying to make a simple reset button, using onClick to send a string to a function.

<button
      type='reset'
      value='Reset'
      id='reset-btn'
      onClick={() => {
        this.onInputChange('0')
      }}
      >
      Reset
      </button>

I have onInputChange function that takes an input value. With console.log(event) in onInputChange function, I know that I passed the argument from onClick, because I can the argument print in the console.

 onInputChange = (event) => {
    console.log('event: ', event);
    let eventString = event.target.value;
    let validArray = eventString.split('');
    // Allow only binary digits in the input
    for (let i=0; i < eventString.length; i++) {
      if (validArray[i] !== '0' && validArray[i] !== '1') {
        validArray.splice(i, 1);
        event.target.value = validArray.join('');
      } 
    }
    return this.bin2Dec(validArray.join(''));
}

So why my app break and I get TypeError: Cannot read property 'value' of undefined?

@izzaros you don't need to do event.target.value because you are passing value('0') so you can access directly event which has value '0'. — akhtarvahid
– akhtarvahid, Commented Mar 30, 2020 at 12:30
Why are you passing this.onInputChange('0') with '0'? Why not onClick={onInputChange}? — Vencovsky
– Vencovsky, Commented Mar 30, 2020 at 12:32
I need the event.target.value because the function is meant to take an input value. — Alon Joshua
– Alon Joshua, Commented Mar 30, 2020 at 13:03

NickG · Accepted Answer · 2020-03-30 13:33:43Z

1

Well, the problem here is how you call this.onInputChange: The way you call the method onInputChange will only get the parameter '0'. The Event is not passed in the function:

onClick={() => {
  this.onInputChange('0')
}}

So you are trying to get '0'.target.value which doesn't make a hole lot of sense, and, therefore the typeError is thrown.

You have four options here:

Option 1: Access the value '0' directly instead of trying to get it from an event you do not have. You already pass your value into your function. Your variable 'event' should already have the value '0'. (i would consider renaming the argument if you pick this option)

Option 2: Pass the event into the function like so:

<button
  type='reset'
  value='Reset'
  id='reset-btn'
  onClick={(event) => {
    this.onInputChange(event, '0')
  }}
>
//... and your method gets an additional parameter:
onInputChange = (event, value) => {
  console.log('event: ', event);
  // event is the onCLickEvent, value is '0'
}

Option 3: You can put the method-name directly in the onClick handler and the event is passed automatically.(downside: you cannot add the argument '0' directly as parameter in you call, instead youi have to read it from your event e.g. from a data-value attribute)

 <button
   type='reset'
   value='Reset'
   id='reset-btn'
   data-value="0"
    onClick={this.onInputChange}
  >
  //... and your method stays the same:
  onInputChange = (event) => {
    console.log('event: ', event);
    //event.target.dataset.value is '0'
  }

Option 4: Send a 'fake' event as parameter:

 <button
   type='reset'
   value='Reset'
   id='reset-btn'
   onClick={() => {
     this.onInputChange({target: {value: '0'}})
   }}
 >

edited Mar 30, 2020 at 13:33

answered Mar 30, 2020 at 13:02

NickG

6216 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

NickG Over a year ago

If you correctly pass the onclick event, you can access the input value via event.target.value -- so what am i missing here? With option 2 you can get the '0' and the input value aswell in your function.

Alon Joshua Over a year ago

The problem here, is that console.log of regular input I get a SyntheticEvent. For the Reset button, console.log of event is Class (???)

NickG Over a year ago

In your case it should be type "string", as your variable 'event' is passed as '0'. I guess there is a missunderstanding here. You could look up what you are doing differently in the onClick calls on regular inputs.

NickG Over a year ago

@Bizzaros added an option 4 that might suit your needs

Collectives™ on Stack Overflow

React onClick TypeError: Cannot read property 'value' of undefined

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related