Actualmente estoy obteniendo datos de una API externa, y los datos están formateados y diseñados con 3 botones cada uno. Luego quiero una función onclick en todos los botones, pero cuando uso onclick="myFunction()" , la función de impresión no está definida en la consola.
import * as React from 'react'; function StagePage () { function myFunction() { console.log("test"); } function apiCall() { fetch("API_URL") .then(response => response.json()) .then(function (result) { for (var i in result) { var match = '<div class="stage-match">'+ '<div class="stage-kampe-odds">'+ '<button class="stage-kampe-odds-btn" onclick="myFunction()">Btn1</button>'+ '<button class="stage-kampe-odds-btn" onclick="myFunction()">Btn2</button>'+ '</div>'+ '</div>'; document.getElementById("main-container").insertAdjacentHTML("afterbegin", match); } }) .catch(error => console.log('error', error)); } apiCall(); return ( <> <div className="container" id="main-container"></div> </> )} export default StagePage;myFunction está en el ámbito del módulo, pero el atributo onclick se evalúa fuera de ese ámbito.
No use DOM para inyectar HTML en su div.
En su lugar, coloque sus datos en React State y lea desde el estado al generar su JSX.
Deberá mover la llamada a apiCall dentro de un gancho useEffect para detener las re-renderizaciones recursivas.
Hay un tutorial de React + Ajax en el sitio web de React (aunque usa un componente de clase en lugar de un componente de función) que cubre esto.