How to change text on mouse event in React

I’m trying to use the onMouseDown event in react to change the text but it doesn’t work. I saw a similar code which actually worked so I have no idea what could be wrong.

import React, { Component } from "react";

import "./ContentComponent.css";

class Content extends Component{
    constructor(){
        super()

        this.onClickForward = this.onClickForward.bind(this)
        this.onClickBack = this.onClickBack.bind(this)

        const img0 = require('./images/dog1.jpg');
        const img1 = require('./images/dog2.jpg');
        const img2 = require('./images/dog3.jpg');
        const img3 = require('./images/dog4.jpg');

        this.state={
            index: 0,
            imgList: [img0, img1, img2, img3]
        }

        this.state2 = {
            tekst: "Pies"
        }
    

    }
 onClickForward(){
            if (this.state.index + 1 === this.state.imgList.lenght) {
                this.setState({
                    index: 0
                })
            } else{
                this.setState({
                    index: this.state.index +1
                })
            }
        }

        onClickBack(){
            if (this.state.index - 1 === -1) {
                this.setState({
                    index: this.state.imgList.lenght -1
                })
            } else{
                this.setState({
                    index: this.state.index - 1
                })
            }
        }

        zmianaTekstu() {
            this.setState2({
                tekst: "Pies domowy - udomowiony gatunek ssaka drapieżnego z rodziny psowatych, traktowany przez niektóre ujęcia systematyczne za podgatunek wilka."
            })
        }

    render(){
        return(
            <div className="info">
                <img src={this.state.imgList[this.state.index]} alt="" className="mainImage" />
                <div className="btns">
                <button onClick={this.onClickBack}>Poprzednie</button>
                <button onClick={this.onClickForward}>Następne</button>
                </div>
                <div className="textInfo">
                    <h3 onMouseDown={() => this.zmianaTekstu()}>Click to change text</h3>
                    <p>{this.state2.tekst}</p>
                </div>
            </div>
        )
    }

}

export default Content;

Console says

Uncaught TypeError: this.setState2 is not a function

The first state which changes images on button click actually works but I’ve pasted the whole code since maybe there is some interaction.

Answer

You should use only one react’s state in Class Component, in that way can access the setState and Update it. A state is an object so it can contain inside of it more variables, arrays, or even more objects. just hold inside the same state, variable for tekst

and update it like you update the first state, like so:

 this.state = {
            index: 0,
            imgList: [img0, img1, img2, img3],
            tekst: 'pies',
        }

And then update the state whenever you need, like so:

 this.setState({
                tekst: "Pies domowy - udomowiony gatunek ssaka drapieżnego z rodziny psowatych, traktowany przez niektóre ujęcia systematyczne za podgatunek wilka."
            })