Стрелка карусели также изменяет текст в div. js

Question

Я делаю экран выбора персонажа и хочу, чтобы стрелки карусели bootstrap также изменили текст в свитке, чтобы соответствовать каждому символу. Прямо сейчас свиток - это отдельный компонент, но я открыт для размещения их на одной странице.

Я пытался захватить его с помощью класса "active", поскольку он шел с каруселью bootstrap и заполнял данные. json, но это не так т работает. Открыты и для других (надеюсь, более простых) идей !!

    state = {
        data: characters,
        curCharacter: {},

    }
    componentDidMount() {
        var cur = this.state.data[0].description;
        this.setState({ curCharacter: this.state.data[0] });
        console.log(this.state.curCharacter)
    }

    characterSelect = (e) => {
        e.preventDefault()
        var cur = document.getElementsByClassName("active")
        console.log("activ1", cur)
        var newClass = cur[0].children[0].alt
        console.log("activ2", newClass);
        var arr = this.state.data;
        console.log(arr);
        for (let i = 0; i < arr.length; i++) {
            console.log(arr[i], arr[i + 2]);
            if (newClass == arr[i].class) {
                this.setState({ curCharacter: arr[i] });
                console.log(this.state.curCharacter)
            }
        }
    }

    render() {
        return (
            <div className="charContain">
                <div className="row">
                    <div className="col-md-6">

                        <div id="carouselExampleControls" class="sprite carousel slide" data-ride="carousel" data-interval="false" >
                            <div class="carousel-inner">
                                <div class="carousel-item active">
                                    <img class="d-block h-100" src="https://i.imgur.com/ODs4zDn.gif" alt="Warrior" />
                                </div>
                                <div class="carousel-item">
                                    <img class="d-block h-100" src="https://i.imgur.com/huVIPkL.png" alt="Archer" />
                                </div>
                                <div class="carousel-item">
                                    <img class="d-block h-100" src="https://i.imgur.com/bKvuY6T.png" alt="Warrior" />
                                </div>
                                <div class="carousel-item">
                                    <img class="d-block h-100" src="https://i.imgur.com/pIHmyE4.png" alt="Mage" />
                                </div>
                            </div>
                            <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="carousel-control-next" onClick={this.characterSelect} href="#carouselExampleControls" role="button" data-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>
                        </div>

                        <button onClick={handleButtonChoose} className="choose">Choose Character</button>

                    </div>
                    <div className="col-md-6">
                        <Scroll
                            text={this.state.description}
                        />
                    </div>
                </div>

            </div>
        )
    }
}

export default Character

Заранее спасибо !!