Multiple Events onChange with if/else statement

I'm using a bootstrap form slider from 1-5 to describe the condition of something from good - bad. On the slider change, I want it to envoke two functions; one to change the number in the state, and then one to identify the correct text to go with the number and display it as the user slides the slider. I've tried a few different variations of this, but nothing seems to work. Would also welcome other ways of forming the functions or state all together. Thanks in advance.

class ConditionSlider extends Component {
     constructor (props) {
         super(props);
         this.state = {
             condition: 1
         };
     };

render() {

const slideCalls = (e) => {
    slideChangeState(e);
    conditionText(e)
    };

const slideChangeState = (e) => {
    this.setState({
        condition: e
        })
    }

let spanText;
const conditionText = (e) => {
    if(e === '1' ) {
        spanText = <div>Very Poor</div>
    } else if (e === '2') {
        spanText = <div>Poor</div>
    } else if (e === '3') {
        spanText = <div>Okay</div>
    } else if (e === '4') {
        spanText = <div>Good</div>
    } else if (e === '5') {
        spanText = <div>Excellent</div>
    }
}


console.log(this.state.condition)

return (
    <div className="slide-class">
    <RangeSlider 
        value={this.state.condition}
        onChange={e => slideCalls(e.target.value)}
        min={1}
        max={5}
        step={1}
        size='sm'
        tooltip='off'
        variant='primary'
        />
        <p>{this.spanText}</p>
        <p>{spanText}</p>
    </div>
    )}
};