WARNING: Cannot update during an existing state transition... Dúvida.

Olá pessoal, tentei replicar a deleção de notas do professor, mas na minha primeira tentativa deu o seguinte erro:

index.js:1 Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.
    at CardNota (http://localhost:3000/static/js/main.chunk.js:533:1)
    at li
    at ul
    at ListaDeNotas (http://localhost:3000/static/js/main.chunk.js:1219:1)
    at section
    at App (http://localhost:3000/static/js/main.chunk.js:194:5)

Código fonte do erro:

import React, { Component } from "react";
import "./estilo.css";
import {ReactComponent as DeleteSvg} from "../../assets/delete.svg"

class CardNota extends Component {

  render() {
    return (
      <section className="card-nota">
        <header className="card-nota_cabecalho">
          <h3 className="card-nota_titulo">{this.props.titulo}</h3>
          <DeleteSvg onClick={this.props.apagarNota(this.props.index).bind(this)}/>
        </header>
        <p className="card-nota_texto">{this.props.texto}</p>
      </section>
    );
  }
}

export default CardNota;

Vi no vídeo que o professor não fez como eu na passagem do método onclick (eu sabia que ia ficar gambiarra, mas queria ver se funcionava assim, pois achei que o professor só não fez assim por boas práticas. Mas aí eu corrigi mais ou menos como o professor, colocando uma função apagar na classe cardNota e funcionou. Código funcionando:

import React, { Component } from "react";
import "./estilo.css";
import {ReactComponent as DeleteSvg} from "../../assets/delete.svg"

class CardNota extends Component {

//FUNÇÃO ADICIONADA
  apagar(){
    const index = this.props.index;
    this.props.apagarNota(index);
  }

  render() {
    return (
      <section className="card-nota">
        <header className="card-nota_cabecalho">
          <h3 className="card-nota_titulo">{this.props.titulo}</h3>
          <DeleteSvg onClick={this.apagar.bind(this)}/>
        </header>
        <p className="card-nota_texto">{this.props.texto}</p>
      </section>
    );
  }
}

export default CardNota;

Mas mesmo resolvendo isso me deixou inquieto, pois não consigo entender o motivo do erro. O compilador não detecta boas práticas (eu acho...) então o erro está por algum motivo técnico (se essa é a palavra). Então a questão é: Porque deu erro? Saber corrigir o erro e não entender o erro me deixa preocupado em acabar repetindo o mesmo erro em contexto diferente!!! Me ajudem aí pessoal!!!