Skip to main content
se añadieron 2021 caracteres en el cuerpo
Origen Enlace

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


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


se eliminaron 2 caracteres en el cuerpo
Origen Enlace

TengoEDIT: Reformulo el contexto, tengo una página que tiene un par de publicaciones, enweb donde entras a una parte de las publicaciones se agregan unos botonessección de call to action... varía según la publicación donde está dicho boton... entonces lo que hice fué agregar un div en la publicacióntrámite y tiene un indexOf paratexto 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 busque este div y lose reemplace por elun boton que ejecuta la funcional clickearlo se ejecute el handleClick... esto lo tengo funcionando a la perfección (en este caso un console log, el problema espero que solo me cambia el primer div...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.

Tengo una página que tiene un par de publicaciones, en una parte de las publicaciones se agregan unos botones de call to action... varía según la publicación donde está dicho boton... entonces lo que hice fué agregar un div en la publicación y un indexOf para que busque este div y lo reemplace por el boton que ejecuta la funcion handleClick... esto lo tengo funcionando a la perfección, el problema es que solo me cambia el primer div...

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: 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.

Origen Enlace

REACT Reemplazar código por un boton

Tengo una página que tiene un par de publicaciones, en una parte de las publicaciones se agregan unos botones de call to action... varía según la publicación donde está dicho boton... entonces lo que hice fué agregar un div en la publicación y un indexOf para que busque este div y lo reemplace por el boton que ejecuta la funcion handleClick... esto lo tengo funcionando a la perfección, el problema es que solo me cambia el primer div...

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.