Change state with Form.Range onChange-CodePudding

New to React Native and JS as a whole. I'm trying to learn to set state and work with classes. How do I set value to the changed value of the <RangeSlider> component?

Getting this error: ReferenceError: value is not defined

Thanks for the help in advance and apologies for the noob question. If I could get a description or explanation on different ways to handle the scope of variables as well and the manipulation that would be appreciated.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 0
    };
  }

  render() {
    return(
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Form>
          <Form.Group>
            <Form.Label>
              Mood
            </Form.Label>
              <RangeSlider
                value={this.state.value}
                onChange={this.setState(value)}
                min={1}
                max={5}/>
          </Form.Group>
        </Form>
      </View>
    );
  }
}

CodePudding user response：

When you do setState, you have to pass in an object, and when you have an onChange you need to pass a function, so you probably want either

onChange={(e) => this.setState({value: e.target.value})}

onChange={(value) => this.setState({value})}

depending on what RangeSlider returns in it's onChange function (the event or just the value) and you should be good to go