javascript - ReactJS - Conditional execution only works if state var is empty string, breaks if null or false -

i'm having recurring bizarre issue conditional rendering in react.

when try evaluate state variable truthy/falsy, it functions if have variable set empty string -- null or false break entire component following error:

uncaught typeerror: cannot read property 'props' of null @ traverse (bundle.js:42660) @ foreachsinglechild (bundle.js:8941) @ traverseallchildrenimpl (bundle.js:9934) @ traverseallchildrenimpl (bundle.js:9950) @ traverseallchildren (bundle.js:10029) @ object.foreachchildren [as foreach] (bundle.js:8961) @ traverse (bundle.js:42669) @ foreachsinglechild (bundle.js:8941) @ traverseallchildrenimpl (bundle.js:9934) @ traverseallchildren (bundle.js:10029) 

here's stripped down snippet of code triggering it, of function's actual html has been removed it's irrelevant:

export class mycomponentname extends react.component {    constructor(props) {      super(props);        this.state = {        itemsloaded: false,      };    }        render() {      if (this.enabletranslations && this.props.location.query.id) {        return (          this.editcategorytranslatedview()        );      } else if (this.props.location.query.id) {        return(          this.editcategoryuntranslatedview()        );      }      else {        return(          this.addcategoryview()        );      }    }          	editcategorytranslatedview() {  		return (  			{  				this.state.itemsloaded  				?  				<some html here>  				:  				this.sectionloading()  			}  		)  	}

edit: appears might react package tabs on page causing issue

import {tabs, tabcontent, tablink} 'react-tabs-redux'; 

it's used in manner inside returning function:

<tabs>    <tablink to="tab1">english</tablink>    <tablink to="tab2">translations</tablink>    <tabcontent for="tab1">  	{  				this.state.itemsloaded  				?  				<some html here>  				:  				this.sectionloading()  	}  	</tabcontent>  	<tabcontent for="tab2">  		//etc etc  	</tabcontent>  </tabs>

var tabs = function (_component) {  	    _inherits(tabs, _component);    	    function tabs() {  	        _classcallcheck(this, tabs);    	        var _this = _possibleconstructorreturn(this, (tabs.__proto__ || object.getprototypeof(tabs)).call(this));    	        _this.state = {  	            selectedtab: null  	        };    	        _this.handleselect = _this.handleselect.bind(_this);  	        return _this;  	    }    	    _createclass(tabs, [{  	        key: 'handleselect',  	        value: function handleselect(tab) {  	            this.setstate({  	                selectedtab: tab  	            });  	        }  	    }, {  	        key: 'finddefault',  	        value: function finddefault(children) {  	            if (this.defaulttab) {  	                return this.defaulttab;  	            }    	            var firstlink = void 0;  	            var firstdefaultlink = void 0;    	            var traverse = function traverse(child) {  	                if (!child.props || firstdefaultlink) {  	                    return;  	                }    	                if (child.props.to) {  	                    firstlink = firstlink || child.props.to;  	                    firstdefaultlink = firstdefaultlink || child.props.default && child.props.to;  	                }    	                _react2.default.children.foreach(child.props.children, traverse);  	            };    	            _react2.default.children.foreach(children, traverse);    	            this.defaulttab = firstdefaultlink || firstlink;  	            return this.defaulttab;  	        }  	    }

apply function call context. e.g 'this.editcategoryuntranslatedview.apply(this)' , try.