Only use Integer numbers not decimal

Question

I need to solve something. I've got my number picker And my issue is following:

"Cannot read property 'value' of null"

I only want to insert integer values in my NumberPicker.

That's my NumberPicker.

  import React from "react";
  import NumberPicker from 'react-widgets/lib/NumberPicker';
  import simpleNumberLocalizer from "react-widgets-simple-number";
  import * as NumericInput from "react-numeric-input";


    simpleNumberLocalizer();

  const handleBlur = (e) => {
     if (e.currentTarget.value === '0') e.currentTarget.value = '1'
  }

    const handleKeypress = (e)  => {
          const characterCode = e.key
             if (characterCode === 'Backspace') return

             const characterNumber = Number(characterCode)
            if (characterNumber >= 0 && characterNumber <= 9) {
        if (e.currentTarget.value && e.currentTarget.value.length) {
          return
        } else if (characterNumber === 0) {
          e.preventDefault()
       }
      } else {
                e.preventDefault()
     }
    }



 const numberPicker = ({
     step,
     precision,
     input,
     placeholder,
     label,
     handleBlur,
     handleKeypress,
     meta: { touched, error },
   ...rest
 }) => {return(
    <div className='form-group'> 

 <label forname={input.name}>{label}</label> <br />
       <NumericInput
       {...rest}
       placeholder={placeholder}
       selected={input.value ? new NumericInput(input.value) : null}
          onChange={input.onChange}
         onKeyDown={(changedVal) => handleKeypress(changedVal)}
         onBlur={(changedVal) => handleBlur(changedVal)}
         min='1'
         step='1' 
         style={{
           wrap: {
               background: '#E2E2E2',
               boxShadow: '0 0 1px 1px #fff inset, 1px 1px 5px -1px #000',
               padding: '2px 2.26ex 2px 2px',
               borderRadius: '6px 3px 3px 6px',
               fontSize: 32
           },
           input: {
               borderRadius: '4px 2px 2px 4px',
               color: '#988869',
               padding: '0.1ex 1ex',
               border: '1px solid #ccc',
               marginRight: 4,
               display: 'block',
               fontWeight: 100,
               textShadow: '1px 1px 1px rgba(0, 0, 0, 0.1)'
           },
           'input:focus' : {
               border: '1px inset #69C',
               outline: 'none'
           },
           arrowUp: {
               borderBottomColor: 'rgba(66, 54, 0, 0.63)'
           },
          arrowDown: {
               borderTopColor: 'rgba(66, 54, 0, 0.63)'
           }
       }}
         className='form-control'
  />
    <div className='text-danger' style={{ marginBottom: '20px' }}>
         {touched && error}
       </div>
       </div>
);
};
  export default numberPicker;

I'm inserting integer values And when I'm doing click in other field, app crashes and I've got error "Cannot read property 'value' of null"

What am I doing wrong?, I'm doing wrong something.

Answer 1

Your component is expecting handleBlur and handleKeypress to be provided as props.

Basically, what's happening here is that you've redefined handleBlur and handleKeypress within the scope of the numberPicker function, and they are undefined because you didn't pass them when you used the component.

Remove handleBlur and handleKeypress from the argument destructuring:

const numberPicker = ({
     step,
     precision,
     input,
     placeholder,
     label,
     handleBlur, // delete this line
     handleKeypress, // delete this line
     meta: { touched, error },
   ...rest
 })