TypeError: Cannot read properties of undefined (reading 'state') in react.js (pretty basic code but I couldn't understand any answer in other posts)

I don't really understand (getting started on react and every answer on this topic really didn't help for it had too many things) because I tried onMouseOver={console.log(this.state)} and it showed it without any problem.

class GenresInDb extends Component {
constructor() {
super()
this.state = {
genresList: [],
genreBg: "",
}
};
componentDidMount() {
window.fetch('http://localhost:3001/api/genres')
.then(response => {
return response.json()
})
.then(genres => {
this.setState({ genresList: genres.data })
})
.catch(error => console.log(error))
}
changeBg() {
if(this.state.genreBg === ""){
this.setState({
genreBg: "bg-secondary"
})
} else {
this.setState({
genreBg: ""
})
}
}
render() {
return (
<React.Fragment>
{/*<!-- Categories in DB -->*/}
<div className="col-lg-6 mb-4">
<div className="card shadow mb-4">
<div className="card-header py-3">
<h6 onMouseOver={this.changeBg} className="m-0 font-weight-bold text-gray-800">Genres in Data Base</h6>
</div>
<div className={`card-body ${this.state.genreBg}`}>
<div className="row">
{this.state.genresList.map((genre, index) => {
return <Genre {...genre} key={index} />
})}
</div>
</div>
</div>
</div>
</React.Fragment>
)
}
}

I expected the background color to change when I hovered with the mouse use the setState yet apparently my this.state inside my method is undefined.

Your issue came from this.state.genreBg in function changeBg().

This is because the this keyword (1) in scope of function changeBg() is not the same as those other this keywords (2) in scope of function GenresInDb() (the <GenresInDb> component).

Why (1) and (2) are not the same?

> The ‘this’ keyword typically references a JavaScript element depending on the scope or context of its use.

There are Global ‘this’ scope and Function ‘this’ scope.

> ...When using strict mode, "this" in a function will refer to it’s explicit value, and if "this" hasn’t been explicitly set then "this" will be undefined.

And maybe you're in React.StrictMode, so that the this in function changeBg() are undefined.

You can refer to this post to understand more about this keyword. It's quite fuzzy for newbies to understand.

Back to your problem, to solve that, you only need to change function into arrow function.

changeBg = () => {
if(this.state.genreBg === ""){
this.setState({
genreBg: "bg-secondary"
})
} else {
this.setState({
genreBg: ""
})
}
}