TypeError: but.getAttribute is not a function - react component

Решил сделать по типу https://github.com/learn-co-students/React-Pizza-atlanta-web-042219, ограничился 1 категорией и когда решил присваивать значение абзацу из input, следуя тактике "Если повторяешь 1 и тот же код более 3 раз, то оптимизируй его, балван" сортирнул массив со сравниванием атрибута абазаца и кнопки и вводом в абзац input.value. Проблема - TypeError: but.getAttribute is not a function

OnDoing () {
        let bascet = document.getElementsByClassName('basc');
        let input = document.getElementById('topper');
        let but = document.getElementsByClassName('pizza-but');
        let i;
        for (i=0; i<=bascet.length; i++) {
            if (bascet[i].getAttribute('data-tab') == but.getAttribute('data-tab')) {
                bascet[i].innerHTML = bascet[i].innerHTML;
            }
        }

    }
    OnRemaster () {
        let bascet = document.getElementsByClassName('basc');
        //let attr = this.getAttribute('data-tab');
        let input = document.getElementById('topper');
        let but = document.getElementsByClassName('pizza-but');
        let i;
        for (i=0; i<=bascet.length; i++) {
            console.log(bascet[i]);
            if (bascet[i].getAttribute('data-tab') == but.getAttribute('data-tab')) {
                bascet[i].innerHTML = input.value;
                console.log(bascet[i]);
            }
        }
    }
    render () {
        return (
            <div className="main-pizza">
            <span className="pizza-headline">Welcome to School Pizza</span>
            <input id="topper"></input>
            <button onClick={this.OnRemaster} className="pizza-but">Submit</button><br />
            <p className="pizza-text">Topping</p>
            <p data-tab="1" id="pizza-basc1" className="basc">Peperoni</p>
            <p className="pizza-text">Topping</p>
            <p data-tab="2" id="pizza-basc2" className="basc">Peperoni</p>
            <button onClick={this.OnDoing} data-tab="1" id="first" className="pizza-but">Edit Pizza</button>
            <button onClick={this.OnDoing} data-tab="2" id="second" className="pizza-but">Edit Pizza</button>
            </div>
        );
    }