Estou iniciando com react e não consigo entender porque do código abaixo não funcionar. Recebo a seguinte mensagem: "TypeError: can't access property "aoClicarNota", this is undefined"
Já estou utilizando o aoClicarNota como arrow function mas mesmo assim não funciona. O que estou fazendo de errado?
import React from 'react';
import axios from 'axios';
import { Button, ButtonGroup, Container } from 'react-bootstrap';
class BlocoNotasPossiveis extends React.Component {
constructor(props) {
super(props);
this.state = {
notasPossiveis: [
{
nota: '1',
descricaoCurta: 'Nota baixa',
descricaoLonga:
'Serviços sempre apresentam falhas, com grande impacto na produtividade, gerando retrabalho constantemente.'
},
{
nota: '2',
descricaoCurta: 'Nota ruim',
descricaoLonga:
'Serviços sempre apresentam falhas, com grande impacto na produtividade, gerando retrabalho constantemente.'
}
]
};
}
render() {
return (
<div className="sombra">
<ButtonGroup aria-label="First group">
{this.state.notasPossiveis.map(this.renderizarBotao)}
</ButtonGroup>
</div>
);
}
aoClicarNota = () => {
console.log("valor.nota")
}
renderizarBotao(valor) {
return (
<Button variant="primary" size="lg" onClick={this.aoClicarNota}>
<span className="linhaNumeral">{valor.nota}</span>
<span className="linhaDescricaoCurta">{valor.descricaoCurta}</span>
</Button>
);
}
}
export default BlocoNotasPossiveis;
this.aoClicarNota = this.aoClicarNota .bind(this);
e veja se funciona.