CODEWITHSUNDEEP
javascriptreactjs
user10398929
user10398929

Reputation:

Function executes differently on two diffrent element

Not sure why I'm getting an error

Cannot read property ‘val’ of undefined

on Slider change unlike button onClick

App.js

constructor(props) {
 super(props);
 this.state = {
   val: 0,
 }
  this.handelChange = this.handelChange.bind(this)
}

handelChange() {
  let tmp = this.state.val
}

render() {
  return(
    <div>
      <Button onClick = {this.handelChange} />
      <CustomSlider onChange= {this.handelChange} />
    </div>  
  )
}

Slider.js

import React from "react";
import Tooltip from "rc-tooltip";
import Slider, { Range } from "rc-slider";

const Handle = Slider.Handle;

const handle = props => {
   const { value, dragging, index, ...restProps } = props;
   return (
      <Tooltip
         prefixCls="rc-slider-tooltip"
         overlay={value}
         visible={dragging}
         placement="top"
         key={index}
      >
         <Handle value={value} {...restProps} />
      </Tooltip>
   );
};

const Slider = props => {
   return (
      <div>
         <div style={{ width: 300, margin: 30 }}>
            <p>{this.props.title}</p>
            <Slider min={0} max={10} defaultValue={5} onChange={props.onChange} handle={handle}/>
         </div>
      </div>
   );
};

export default Slider;

handelChange executes without an error on button click. However, onChange of slider it gives an error Cannot read property ‘val’ of undefined. How come the same function does not executes the same on two different elements

Upvotes: 0

Views: 75

Answers (1)

Steven Daniel Anderson
Steven Daniel Anderson

Reputation: 1443

You need to bind handelChange to this or convert handelChange into an arrow function.

 constructor(props) {
    super(props)
    this.handelChange = this.handelChange.bind(this)
  }

Upvotes: 3

Related Questions