1

Tengo un problema, y es que quiero hacer un boton de confirmación dentro de un toastr, y cuando agrego codigo html al toastr aparece el codigo mas no aparece el botón:

introducir la descripción de la imagen aquí

usando el siguiente codigo:

...
import { ToastContainer } from "react-toastr";
let container;
<div>
class App extends Component {
...
render(){
..
 return (<div>
    <ToastContainer
              ref={ref => container = ref}
              className="toast-top-right"
            />
      <button className="btn btn-danger" onClick={() =>
                    container.warning(
                       `¿Desea eliminar "${this.state.todos[i].titulo}" ?  <br /><br /><button type="button" onClick=${this.handleElimitarUno.bind(this,i)} class="btn clear">Sí</button>`,
                       "Alenteción",{
                        "closeButton": true,
                        message: true
                       }
                      )
                    }>Elimitar</button>
    </div>
 );
...
}
export default App;

Como puedo hacer para que me muestre el html y no el codigo? que no lo tome como cadena de texto? Gracias.

2
  • Hola Andres, es recomendable que añadas el código necesario para poder reproducir tu problema, en este caso creo que sería necesario tanto las imports de App como el código completo del componente ToastContainer donde tienes el problema. Proveer un ejemplo online que poder probar / modificar ayudará aun más. Hay plataformas donde probar React como: codesandbox.io o stackblitz.com
    – Orici
    Commented el 16 jun. 2020 a las 15:18
  • ¿Qué se supone que hace esta línea? ref={ref => container = ref} ¿qué hay en ref?
    – Orici
    Commented el 16 jun. 2020 a las 20:57

2 respuestas 2

1

Citando la documentación:

To display HTML, simply pass JSX instead of strings for title and message.

Por lo tanto, cambiando tu string a jsx, quedaría algo como:

container.warning(
  <div>
    ¿Desea eliminar {this.state.todos[i].titulo} ?
    <br/>
    <br/>
    <button
      type="button"
      onClick={this.handleElimitarUno.bind(this, i)}
      className="btn clear"
    >
      Sí
    </button>
  </div>,
  'Alenteción',
  {
    closeButton: true,
    message: true,
  }
);
0

A primera vista tu problema es este:

return (
    <ToastContainer
              ref={ref => container = ref}
              className="toast-top-right"
            />
      <button className="btn btn-danger" onClick={() =>
                    container.warning(
                       `¿Desea eliminar "${this.state.todos[i].titulo}" ?  <br /><br /><button type="button" onClick=${this.handleElimitarUno.bind(this,i)} class="btn clear">Sí</button>`,
                       "Alenteción",{
                        "closeButton": true,
                        message: true
                       }
                      )
                    }>Elimitar</button>
    </div>
 );

Debes "encerrar todo el código JSX dentro de una etiqueta JSX, por ejemplo un div o fragment. Veo que cierras el código con un div pero no lo abres, así puedes probar:

return (
    <div>
        <ToastContainer
              ref={ref => container = ref}
              className="toast-top-right"
            />
      <button className="btn btn-danger" onClick={() =>
                    container.warning(
                       `¿Desea eliminar "${this.state.todos[i].titulo}" ?  <br /><br /><button type="button" onClick=${this.handleElimitarUno.bind(this,i)} class="btn clear">Sí</button>`,
                       "Alenteción",{
                        "closeButton": true,
                        message: true
                       }
                      )
                    }>Elimitar</button>
    <div/>
 );
1

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.