Estoy creando una encuesta con SurveyJs. Al hacerlo, busco crear un botón para agregar a cada título de pregunta. Pude hacer lo siguiente con Javascript, pero busco hacer esencialmente lo mismo con React.

La representación de la encuesta funciona bien, así que no creo que valga la pena mostrarla. La siguiente es la función de devolución de llamada cuando se procesa cada pregunta. Lo siguiente funciona bien:

 const onAfterRenderQuestion = (survey, options) = { // create the button const btn = document.createElement("button") btn.innerHTML = "Click me!" // define what the button should do btn.onClick = function () { // do whatever } // get the question title from the survey and append the button to the end of it let header = options.htmlElement.querySelector("h5") if (!header) header = options.htmlElement header.appendChild(btn) }

El código anterior funciona bien y, como puede ver, está usando Javascript. Sin embargo, estoy tratando de hacer exactamente lo mismo usando React pero no puedo hacerlo. De momento tengo esto:

 // create the button component const myButtonElement = ( <Button onClick={() => {*call some function*}} ) let header = options.htmlElement.querySelector("h5") if (!header) header = options.htmlElement // create the entire component const questionTitle = React.createElement("div", {}, header) const buttonElement = React.createElement("div", {}, myButtonElement) const titleWithButton = React.createElement("div", {}, [questionTitle, buttonElement]) ReactDOM.render(titleWithButton, document.getElementById(options.question.id))

Sin embargo, el código anterior da como resultado el siguiente error:

Error: los objetos no son válidos como hijos de React (encontrado: [objeto HTMLHeadingElement]). Si tenía la intención de representar una colección de niños, use una matriz en su lugar.

Incluso si uno no está familiarizado con Surveyjs, ¿cómo puedo simplemente agregar un elemento a un elemento existente usando React, de manera similar a como ya lo hice con Javascript?