{"action":"created","issue":{"url":"https://api.github.com/repos/jesusoterogomez/react-notify-toast/issues/57","repository_url":"https://api.github.com/repos/jesusoterogomez/react-notify-toast","labels_url":"https://api.github.com/repos/jesusoterogomez/react-notify-toast/issues/57/labels{/name}","comments_url":"https://api.github.com/repos/jesusoterogomez/react-notify-toast/issues/57/comments","events_url":"https://api.github.com/repos/jesusoterogomez/react-notify-toast/issues/57/events","html_url":"https://github.com/jesusoterogomez/react-notify-toast/issues/57","id":324663403,"number":57,"title":"Error on getElementById","user":{"login":"ulisescarreonalvarez","id":25987364,"avatar_url":"https://avatars2.githubusercontent.com/u/25987364?v=4","gravatar_id":"","url":"https://api.github.com/users/ulisescarreonalvarez","html_url":"https://github.com/ulisescarreonalvarez","followers_url":"https://api.github.com/users/ulisescarreonalvarez/followers","following_url":"https://api.github.com/users/ulisescarreonalvarez/following{/other_user}","gists_url":"https://api.github.com/users/ulisescarreonalvarez/gists{/gist_id}","starred_url":"https://api.github.com/users/ulisescarreonalvarez/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ulisescarreonalvarez/subscriptions","organizations_url":"https://api.github.com/users/ulisescarreonalvarez/orgs","repos_url":"https://api.github.com/users/ulisescarreonalvarez/repos","events_url":"https://api.github.com/users/ulisescarreonalvarez/events{/privacy}","received_events_url":"https://api.github.com/users/ulisescarreonalvarez/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":9,"created_at":"2018-05-19T21:56:08Z","updated_at":"2018-05-28T21:40:47Z","closed_at":null,"author_association":"NONE","body":"Hi everyone,\r\n\r\nFirst of all greate component i really like it, i'm working on a webapp actually my code looks like this:\r\n\r\n```\r\nimport React, { Component } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Backend from '../Layouts/Backend';\r\nimport { InfoboxProject } from '../UI/Infobox';\r\nimport { connect } from 'react-redux';\r\nimport { actionCreators } from '../../actions';\r\nimport Loading from '../Helpers/Loading';\r\nimport Rodal from 'rodal';\r\nimport { withRouter } from 'react-router';\r\nimport { Button } from 'semantic-ui-react'\r\nimport Notifications, {notify} from 'react-notify-toast';\r\n\r\nclass Clients extends Component {\r\n    constructor(props) {\r\n        super(props);  \r\n        this.state = { visible: false, item: null };          \r\n    }\r\n    \r\n    componentWillMount(){\r\n        const token = localStorage.getItem('token');\r\n        if (typeof token == 'undefined' || token == null)\r\n        {\r\n            this.props.history.push('/login');\r\n        }        \r\n    }\r\n\r\n    componentDidMount() {\r\n         this.props.dispatch(actionCreators.fetchClients());\r\n     }\r\n     \r\n    show(item) {\r\n        this.setState({ visible: true, name: item });\r\n    }\r\n\r\n    hide() {\r\n        this.setState({ visible: false });\r\n    }\r\n\r\n    componentWillReceiveProps(nextProps){\r\n  if(typeof nextProps.clients != \"undefined\" && nextProps.clients != null && nextProps.clients.length != null && nextProps.clients.length > 0){}\r\n            let myColor = { background: '#f44242', text: \"#FFFFFF\" };\r\n            notify.show(\"No cuentas actualmente con clientes\", \"custom\", 5000, myColor); \r\n        }\r\n\r\n    }\r\n\r\n    render() {\r\n        let results = this.props.clients.map((client) => {\r\n            return <ClientExtend key={client.debtorno} client={client} datClick={this.show.bind(this)}/>\r\n        });\r\n\r\n        return (\r\n            \r\n            this.props.isFetching ? <Backend><div className=\"content-inner\"><Loading /></div></Backend> :\r\n            <Backend>     \r\n                <Rodal visible={this.state.visible} onClose={this.hide.bind(this)}>\r\n                    <div>{this.state.nombre}</div>\r\n                </Rodal>           \r\n                <div className='main'>\r\n\t\t    \t<Notifications />\r\n    \t\t</div>\r\n                <div className=\"content-inner\">\r\n                    <div className=\"table-responsive\">\r\n                        <table>\r\n                            <tbody>\r\n                                {results}\r\n                            </tbody>\r\n                        </table>\r\n                    </div>\r\n                </div>\r\n            </Backend>\r\n        );\r\n    }\r\n}\r\n\r\nClients.propTypes = {\r\n    dispatch: PropTypes.func,\r\n    isFetching: PropTypes.bool.isRequired,\r\n    clients: PropTypes.array.isRequired\r\n\r\n};\r\n\r\nClients.contextTypes = {\r\n    router: PropTypes.object.isRequired\r\n};\r\n\r\nexport default connect((store) => {\r\n  return {\r\n        clients: store.clientState.data,\r\n        pagination: store.clientState.pagination,\r\n        isFetching: store.clientState.isFetching\r\n  };\r\n})(Clients)\r\n\r\n\r\nclass ClientExtend extends Component {\r\n\r\n    constructor(props) {\r\n        super(props); \r\n    }\r\n\r\n    assignItemModal(item) {\r\n        this.props.datClick(item);\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <tr>\r\n                <td className=\"min-width\">              \r\n\r\n                    <div className=\"title-wrapper\">\r\n                        <div className=\"title\">Name</div>\r\n                        <div className=\"subtitle\">{this.props.client.nombre} {this.props.client.nombre}</div>\r\n                    </div>\r\n                </td>\r\n                <td>\r\n                    <div className=\"key-value\">\r\n                        <span>Email</span>\r\n                        <strong>{this.props.client.email}</strong>\r\n                    </div>\r\n                </td>\r\n                <td>\r\n                    <div className=\"key-value\">\r\n                        <span>Phone</span>\r\n                        <strong>{this.props.client.razon_social}</strong>\r\n                    </div>\r\n                </td>\r\n                <td className=\"actions min-width\">\r\n                    <div className=\"button-group\">\r\n                        <Button color=\"black\" onClick={this.assignItemModal.bind(this, this.props.client.nombre)}>Edit</Button>\r\n                        <Button color=\"red\" onClick={this.assignItemModal.bind(this, this.props.client.nombre)}>Delete</Button>\r\n                    </div>\r\n                </td>\r\n            </tr>\r\n        );\r\n    }\r\n}\r\n```\r\n\r\nWhen my prop \"clients\" is empty i wanna show a toast but i'm having this error:\r\n\r\n```\r\nTypeError: document.getElementById(...) is null\r\nshow\r\nnode_modules/react-notify-toast/bin/notify.js:55\r\n\r\n  52 |  * }\r\n  53 |  */\r\n  54 | function show(text, type, timeout, color) {\r\n> 55 |     if (!document.getElementById(_defaults.defaults.wrapperId).hasChildNodes()) {\r\n  56 |         // Use default timeout if not set.\r\n  57 |         var renderTimeout = timeout || _defaults.defaults.timeout;\r\n  58 | \r\n\r\ncomponentWillReceiveProps\r\nsrc/components/Pages/Clients.js:43\r\n\r\n  40 |     console.log(nextProps.clients.lenght);\r\n  41 |     if(typeof nextProps.clients.lenght ==='undefined'){\r\n  42 |         let myColor = { background: '#f44242', text: \"#FFFFFF\" };\r\n> 43 |         notify.show(\"No cuentas actualmente con clientes\", \"custom\", 5000, myColor); \r\n  44 |     }\r\n  45 | \r\n  46 | }\r\n\r\nfetchClients/</<\r\nsrc/actions/clients.js:25\r\n\r\n  22 |           dataFetched: true\r\n  23 |       });\r\n  24 | }else{\r\n> 25 |   dispatch({\r\n  26 |       type: types.FETCHING_CLIENTS_FAILURE,\r\n  27 |       isFetching: false,\r\n  28 |       error: true,\r\n```\r\nWhat am i missing? \r\n\r\nRegards"},"comment":{"url":"https://api.github.com/repos/jesusoterogomez/react-notify-toast/issues/comments/392607281","html_url":"https://github.com/jesusoterogomez/react-notify-toast/issues/57#issuecomment-392607281","issue_url":"https://api.github.com/repos/jesusoterogomez/react-notify-toast/issues/57","id":392607281,"user":{"login":"jesusoterogomez","id":5709736,"avatar_url":"https://avatars3.githubusercontent.com/u/5709736?v=4","gravatar_id":"","url":"https://api.github.com/users/jesusoterogomez","html_url":"https://github.com/jesusoterogomez","followers_url":"https://api.github.com/users/jesusoterogomez/followers","following_url":"https://api.github.com/users/jesusoterogomez/following{/other_user}","gists_url":"https://api.github.com/users/jesusoterogomez/gists{/gist_id}","starred_url":"https://api.github.com/users/jesusoterogomez/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jesusoterogomez/subscriptions","organizations_url":"https://api.github.com/users/jesusoterogomez/orgs","repos_url":"https://api.github.com/users/jesusoterogomez/repos","events_url":"https://api.github.com/users/jesusoterogomez/events{/privacy}","received_events_url":"https://api.github.com/users/jesusoterogomez/received_events","type":"User","site_admin":false},"created_at":"2018-05-28T21:40:47Z","updated_at":"2018-05-28T21:40:47Z","author_association":"OWNER","body":"How about this?\r\n\r\n```\r\nrender() {\r\n    let results = this.props.clients.map((client) => {\r\n        return <ClientExtend key={client.debtorno} client={client} datClick={this.show.bind(this)}/>\r\n    });\r\n\r\n    return (\r\n        <Backend>\r\n            <Notifications />\r\n            {this.props.isFetching ?\r\n                <div className=\"content-inner\"><Loading /></div>\r\n                :\r\n                <div>\r\n                    <Rodal visible={this.state.visible} onClose={this.hide.bind(this)}>\r\n                        <div>{this.state.nombre}</div>\r\n                    </Rodal>     \r\n                    <div className=\"content-inner\">\r\n                        <div className=\"table-responsive\">\r\n                            <table>\r\n                                <tbody>\r\n                                    {results}\r\n                                </tbody>\r\n                            </table>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            }\r\n        </Backend>\r\n    );\r\n}\r\n```\r\n\r\nI made a small refactoring, by only rendering the different states inside the isFetching conditional. I moved `Backend` to the outer level of the JSX markup to avoid duplicating that component. It should behave in the same way as your app should."}}
{"actor":{"display_login":"jesusoterogomez"}}