Estou fazendo um projeto pessoal com react e estou usando os cursos para melhorar meu cód. Então fui apresentado ao .map() como uma solução para diminuir o html, usei o .map() para diminuir a repetição de botões, pois mudavam só alguns parametros, mas o problema é que um desses parametros era uma função do "onClick". Cód que usei:
export default class Card extends Component {
render() {
return (
<div className="carta">
{Array.of(
[
"carta_botao-passiva",
"acaoPassiva()",
],
[
"carta_botao-habilidade-arma",
"acaoHabilArma()",
],
[
"carta_botao-habilidade-um",
"acaoHabilUm()",
],
).map((infos, index) => {
let idBotao = infos[0];
let acao = infos[1];
return (
<button
key={index}
type="button"
onClick={acao}
className="carta_botao-habilidade"
id={idBotao}
/>
);
})}
</div>
);
}
}
Com esse cód o console diz que esperava uma função no "onclick" mas recebeu uma string. Já tentei usar o eval(), mas, além do react gritar pra eu não fazer, ele apaga tudo que tem na tela ou o erro passa a ser "objeto" em vez d "string". É isso, tem alguma forma de eu manter o cód pequeno e utilizar diferentes funções no "onClick"?