Set State isn't changing the value on React Native Slider

Question

So i've been trying to figure out how to change the value of my text component on the screen. Unfortunately the value remains the same no matter what I do. The value prints on the terminal, but it doesn't appear to change the text on the screen. Can anyone point me towards the right direction.Any help would be appreciated.

 const Speed =({navigation}) =>{

        // Set the Default State
        this.state = { age: 18 }

        getVal = (val) => {
          console.warn(val);
         }
        onChange = (v) => {

          this.setState({val:Math.round(v)});
          console.log(this.state );
        }

        return(
          <View >
          <Slider
               minimumValue = {0}
               maximumValue = {50} 
               value={this.state.age}
               onValueChange={val => this.setState({ age: val })}
               onSlidingComplete={ val => this.getVal(val)}

            />
            <Text>  {this.state.age}</Text>

            <Button 
              style = {{margin:50,backgroundColor:'black'}}
              title="Slow"
            />
            <Button 
              style = {{margin:50,backgroundColor:'black'}}
              title="Medium"
            />
            <Button 
              style = {{margin:50,backgroundColor:'black'}}
              title="Fast"
            />
          </View>
          );
    }

Answer 1

Your Speed component is a stateless function, try rewriting it with by extending the Component class.

class Speed extends Component {
    constructor() {
        super();
        this.state = { age: 18 }
        this.getVal = this.getVal.bind(this);
        this.onChange = this.onChange.bind(this);
    }
        // Set the Default State

    getVal(val) {
        console.warn(val);
    }
    onChange(v) {
        this.setState({ val: Math.round(v) });
        console.log(this.state);
    }
    render() {
        return (
            <View >
                <Slider
                    minimumValue={0}
                    maximumValue={50}
                    value={this.state.age}
                    onValueChange={val => this.setState({ age: val })}
                    onSlidingComplete={val => this.getVal(val)}

                />
                <Text>  {this.state.age}</Text>

                <Button
                    style={{ margin: 50, backgroundColor: 'black' }}
                    title="Slow"
                />
                <Button
                    style={{ margin: 50, backgroundColor: 'black' }}
                    title="Medium"
                />
                <Button
                    style={{ margin: 50, backgroundColor: 'black' }}
                    title="Fast"
                />
            </View>
        );
    }
}