Reset to default slider value react-native

Question

I try to create a reset button for the slider that will reset it to the initial value when pressed. My code doesn't show any error but the reset button doesn't work.

This is the Slider component:

import React, {Component} from 'react';
import {Slider,
  Text,
  StyleSheet,
  View} from 'react-native';
import {ButtonReset} from './ResetButton.js'


export class SliderRoll extends Component {

  state = {
    value: 1,
  };

  resetSliderValue = () => this.setState({value : 1})

  render() {
    return (
      <View style={styles.container}>
        <Slider style={styles.slider}
          minimumTrackTintColor={'blue'}
          maximumTrackTintColor={'red'}
          maximumValue = {2}
          value= {this.state.value}
          step={0.5}
          onValueChange={(value) => this.setState({value: value})} 
        />

        <ButtonReset resetSliderValue = {this.state.resetSliderValue}/>
        <Text style={styles.text} >
          {this.state.value}
        </Text> 

      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flexDirection:'column',
    width: 150,
    backgroundColor: 'pink',
    marginLeft: 50,
    justifyContent: 'center'
  },
  slider: {
    width: 150,
  },
  text: {
    fontSize: 20,
    textAlign: 'center',
    fontWeight: '500',
  },
})

This is the Reset button:

import React, {Component} from 'react';
import {
  Text,
  View,
  StyleSheet,
  Image,
  TouchableOpacity
} from 'react-native';

export class ButtonReset extends Component{
    render(){
      return(
        <TouchableOpacity style = {styles.container}
            onPress= {this.props.resetSliderValue}>
          <Image
            style={styles.button}
            source={require('./restart.png')}
          />
        </TouchableOpacity>
      );
    }
}

const styles = StyleSheet.create({
    container: {
        width: 50,
        alignItems: 'center',
        backgroundColor: 'pink',
        marginLeft: 50,
        marginTop: 10,
    },
    button: {
        width:50,
        height:50,
        transform: [
            {scale: 1}
        ] 
    }
})

Answer 1

Here is the problematic piece that stuck out right away:

<ButtonReset resetSliderValue = {this.state.resetSliderValue}/>

I believe it should be:

<ButtonReset resetSliderValue = {this.resetSliderValue}/>

Also, I believe you need to bind this so you can access this for setting state in the resetSliderValue function. I personally like to bind this once in the constructor for any functions that require it so no unnecessary rebinding during rendering:

constructor(props) {
  super(props);
  this.resetSliderValue = this.resetSliderValue.bind(this);
}