0

EDIT: Reformulo el contexto, tengo una página web donde entras a una sección de un trámite y tiene un texto sacado de la base de datos en html, en algunos lugares así como aplicamos los h1 o negritas tenemos agregados uno o varios dentro del contenido que queremos que se reemplace por un boton que al clickearlo se ejecute el handleClick (en este caso un console log, pero que lo usarémos para abrir un modal)

import React from 'react'

const Content = ({ contentPost, style, rtl }) => {

  const handleClick = () => {
    console.log("hola")
  }

  const divPosition = contentPost.content.indexOf('<div id="blogForm"></div>');
  const beforeDiv = contentPost.content.substring(0, divPosition);
  const afterDiv = contentPost.content.substring(divPosition + '<div id="blogForm"></div>'.length);
  return (
    <div>
      <div dangerouslySetInnerHTML={{ __html: beforeDiv }} />
      <center><a onClick={handleClick} className="btn sm-butn butn-gard border-0 text-white"><span>Texto del botón</span></a></center>
      <div dangerouslySetInnerHTML={{ __html: afterDiv }} />
    </div>
  )
}

export default Content

Luego hice algo así como esto

import React from 'react'

const Content = ({ contentPost, style, rtl }) => {

  const handleClick = () => {
    console.log("hola")
  }

  const regex = '<div id="blogForm"></div>'; // Definir la expresión regular
  const contentWithButton = contentPost.content.replace(regex, `<button onClick={handleClick}>Texto del botón</button>`);
  return (
    <div>
      <div dangerouslySetInnerHTML={{ __html: contentWithButton }} />
    </div>
  )
}

export default Content

pero me pasa lo mismo... solamente me cambia 1 pero el boton no funciona me dice que handleClick no esta definido...

Para darle mas contexto Tengo esto en la base de datos:

asd asd2232 156165

donde deberia mostrar "asd" BOTON "asd2232" BOTON "156165"

Datos aleatorios pero esas palabras serian textos.

EDIT: Agrego en componente que llama al Content:


import Details from './Details';
import Metadata from './Metadata';
import Content from './Content';
import Comments from './Comments';
import Sidebar from './Sidebar';
import Error404 from './Error404';


const AllNews = ({ data, isWide, leftSidebar, style = "4", rtl }) => {

  let formattedDate = '';
  if (data && data.created_at) {
    const date = new Date(data.created_at);
    const options = { day: 'numeric', month: 'numeric', year: 'numeric' };
    formattedDate = new Intl.DateTimeFormat('es-ES', options).format(date);
  }

  return (
    <section className="all-news section-padding pt-50 blog bg-transparent style-3">
      <div className="container">
        {data && data.description && (
          <>
            <Details details={{ title: data.name, time: formattedDate, type: data.type, content: data.description }} style={style} rtl={rtl} />
            <div className="row gx-4 gx-lg-5">
              {
                !isWide && leftSidebar && (<Sidebar data={data.sidebar} style={style} rtl={rtl} />)
              }
              <div className={isWide ? 'col-lg-12' : 'col-lg-8'}>
                {/* <Metadata metadata={{ imgLetter: data.imgLetter, user: data.user, commentsCount: data.commentsCount, viewsCount: data.viewsCount }} rtl={rtl} /> */}
                <div className="blog-content-info">
                  <Content contentPost={{ content: data.description }} style={style} rtl={rtl} />
                  {/* <Comments comments={data.comments} commentCard={data.commentCard} style={style} rtl={rtl} /> */}
                </div>
              </div>
              {
                !isWide && !leftSidebar && (<Sidebar data={data.sidebar} style={style} rtl={rtl} />)
              }
            </div>
          </>
        )}
        {(!data || !data.description) && (
          <Error404 />
        )}
      </div>
    </section>
  )
}

export default AllNews


5
  • En cuantos posibles sitios puede estar el boton?
    – ferter3006
    el 10 mar. 2023 a las 14:51
  • y... de momento en el mas extenso son 4 veces el resto la mayoria de momento 3 el 10 mar. 2023 a las 15:31
  • y el botón lo quieres en los 4 sitios ? Edita la pregunta para entender mejor. Quita lo que no se necesite saber, deja el codigo limpio y explica exactamente donde y porque falla y que es lo que quieres hacerm, por que no se entiende demasiado.
    – ferter3006
    el 10 mar. 2023 a las 16:13
  • Claro la idea sería que yo lo agregue 2 3 o 4 veces según lo que necesite la cantidad de texto que agreguemos, poner el boton en cada uno de esos lados. el 10 mar. 2023 a las 16:42
  • No he revisado react en mucho tiempo pero creo que te faltan los corchetes en onClick={handleClick()}. Pues en este caso tratas de acceder como función no como parámetro.
    – DavElsanto
    el 10 mar. 2023 a las 16:56

1 respuesta 1

1

Para asegurarte de que la función handleClick está definida en el ámbito correcto, necesitas utilizar comillas de plantilla en lugar de comillas dobles o simples. Las comillas de plantilla te permiten insertar expresiones de JavaScript dentro de una cadena utilizando la sintaxis ${expr}.

Entonces, deberías cambiar esta línea:

const contentWithButton = contentPost.content.replace(regex, `<button onClick={handleClick}>Texto del botón</button>`);

a esta :

const contentWithButton = contentPost.content.replace(regex, `<button onClick={\`${handleClick}\`}>Texto del botón</button>`);

De esta forma, la función handleClick será definida en el ámbito correcto y será ejecutada cuando se haga clic en el botón generado.

Además, debes asegurarte de que estás reemplazando todas las instancias de en lugar de solo la primera. Para hacer esto, debes utilizar una expresión regular con la bandera global (g). Entonces, deberías cambiar esta línea:

const regex = '<div id="blogForm"></div>'; // Definir la expresión regular

a esta:

const regex = /<div id="blogForm"><\/div>/g; // Definir la expresión regular

De esta forma, la expresión regular buscará todas las instancias de en el contenido y las reemplazará con el botón generado.

2
  • Hola, bien ahi si me reemplaza todos pero me da este error al presionar el boton: Unhandled Runtime Error SyntaxError: Unexpected end of input el 15 mar. 2023 a las 10:11
  • Este error que dices suele relacionado con alguna comillas sin cerrar, algún parentesis sin cerrar, algún claudator sin cerrar.. etc, normalmente es debido a esto. Echa un vistazo al código, pon marcas y seguro encontraras la línea donde falla. Si no: siempre puedes abrir otro hilo para este error. Saludos!
    – ferter3006
    el 15 mar. 2023 a las 12:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.