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
onClick={handleClick()}
. Pues en este caso tratas de acceder como función no como parámetro.