Can I do slider without binding functions (react)

I started to do some code for my react-redux app. I attached some code of react element with slider. I do not understand why I can't use the function on click without 'rude' binding. Could you please help me to explain that moment? I tried to do it more reusable using state array as props on click, it didn't work...

class Mlscroll extends Component {
    constructor(props) {
        super(props);

        this.nextSlide = this.nextSlide.bind(this);
        this.prevSlide = this.prevSlide.bind(this);
    }

    state = {
        arr: [],
        cur_amount: 0 
    }

    componentDidMount() {
        this.generateSlides();
        const wrap = document.querySelector(".wrapper").children;
        let newArray = [];
        for (let elem of wrap) {
            newArray.push(elem);
            this.setState(() => ({
                arr: newArray
            }));
        }
    }

    nextSlide = () => {
        for(let i = 0; i < this.state.arr.length; i++) {
            if(this.state.arr[i].classList.contains("active")) {
                this.state.arr[i].classList.remove("active");
                this.state.arr[i-1].classList.add("active");
            }

            if(this.state.arr[i].classList.contains("first") && this.state.arr[i].classList.contains("active")) {
                break;
            }
        }
    } 

    prevSlide = () => {
        for(let i = this.state.arr.length - 1; i > 0; i--) {
            if(this.state.arr[i].classList.contains("active")) {
                this.state.arr[i].classList.remove("active");
                this.state.arr[i+1].classList.add("active");
            }

            if(this.state.arr[i].classList.contains("last") && this.state.arr[i].classList.contains("active")) {
                break;
            }
        }
    }
 
    generateSlides = () => {
        const wrapper = document.querySelector(".wrapper");
        for(let i = 40; i < 600; i = i + 10) {
            let child = document.createElement("div");
            let text = document.createTextNode(`${i + 10}`);
            child.appendChild(text);
            child.classList.add("slide");
            wrapper.appendChild(child);
            if(i === 40) {
                child.classList.add("first");
            }
            if(i === 240) {
                child.classList.add("active");
            }
            if(i === 600) {
                child.classList.add("last"); 
            }
        }
    }

    render() {
        return (
            <div className="ml_scroll">
                <button id="up" className="but" onClick={this.nextSlide}>△</button>
                <div className="wrapper"></div>
                <button id="down" className="but" onClick={this.prevSlide}>▽</button>
            </div>

        )
    }
};