Sweet Alert / Modal problem

[eduardoamills]

Hi, I have some problems to integrate Sweet Alert or Modal component to the View with Jquery Datatables.

Here part of my code:

import React, {Component} from 'react'; // jQuery plugin - used for DataTables.net import $ from 'jquery'; import {Grid, Row, Col} from 'react-bootstrap';

import Card from 'components/Card/Card.jsx'; import Button from 'elements/CustomButton/CustomButton.jsx'; import SweetAlert from 'react-bootstrap-sweetalert'; require('datatables.net-responsive'); $.DataTable = require('datatables.net-bs');

class Main extends Component { constructor(props){ super(props); this.state = { alert: null }; } warningWithConfirmMessage(){ this.setState({ alert: ( <SweetAlert warning style={{display: "block",marginTop: "-100px"}} title="Are you sure?" onConfirm={() => this.successDelete()} onCancel={() => this.hideAlert()} confirmBtnBsStyle="info" cancelBtnBsStyle="danger" confirmBtnText="Sí, bórralo!" cancelBtnText="Cancelar" showCancel

¿Esta seguro de borrar el usuario? ) }); } successDelete(){ this.setState({ alert: ( <SweetAlert success style={{display: "block",marginTop: "-100px"}} title="Deleted!" onConfirm={() => this.hideAlert()} onCancel={() => this.hideAlert()} confirmBtnBsStyle="info"

Your imaginary file has been deleted. ) }); } hideAlert(){ this.setState({ alert: null }); } return (

        <Card title="Usuarios del sistema" content={<div className = "fresh-datatables" >
         <Button fill onClick={this.warningWithConfirmMessage.bind(this)}>Try me!</Button>

The main problem is that I dont get any errors, but the component is never showed.. in other parts of my project does not work either.

Can you help me??

regards

[einazare]

Hello @eduardoamills and thank you for using our products. Could you please send me your project or if it is on GitHub give me access to it so i can understand better the problem? Just by looking at the code that you've given me i can see that you do not have the render method for the class, you have a direct return, which i'm pretty sure it's wrong. You should replace : return (

    <Card title="Usuarios del sistema" content={<div className = "fresh-datatables" >
     <Button fill onClick={this.warningWithConfirmMessage.bind(this)}>Try me!</Button>

with

render(
     return (
          <Card title="Usuarios del sistema" content={<div className = "fresh-datatables" >
              <Button fill onClick={this.warningWithConfirmMessage.bind(this)}>Try me!</Button>
         </Card>
     );
)

Best, Manu

[eduardoamills]

Hi @EINazare

That is no the problem, I think that for some reason github has pasted wrong the source code

` render() { return (

Try me! ` Your code fail for me, notice how the "render" method is written: You written render(return(...)); In others parts: render() { return()); Please...any other idea??

[eduardoamills]

Hi @EINazare

I found the problem, this line was missing in render:

{this.state.alert}

thank you for check it, I will close the issue.

regards!!