Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Does react have a "null element"?

Tags:

reactjs

I have a piece of a component that looks like this

            c.props.results.totalCount > c.props.searchOptions.perPage 
                ? createElement(ReactPaginate, {
                    previousLabel: "<",
                    nextLabel: ">",
                    pageNum: Math.ceil(c.props.results.totalCount / c.props.searchOptions.perPage),
                    marginPagesDisplayed: 2,
                    pageRaneDisplayed: 5,
                    containerClassName: "pagination",
                    activeClass: "active",
                    forceSelected: c.props.searchOptions.page,
                    clickCallback: noop
                })
                : null

Basically, if there is anything to page, include a pager widget, otherwise don't.

I'd like to encapsulate this logic in its own component.

createElement(OptionalPager, c.props)

The only problem is that the render function can't return null and I'd prefer not to insert an intermediate element here. Is there some sort of React.DOM.null element that I can return instead?

like image 922
George Mauer Avatar asked Jul 05 '15 15:07

George Mauer


2 Answers

The render function for your class should be able to accept null.

https://facebook.github.io/react/blog/2014/07/17/react-v0.11.html

If you are calling React.render yourself though you can render noscript just like they do

React.render(<noscript />, ...)
like image 141
noveyak Avatar answered Nov 16 '22 13:11

noveyak


If in rendering you can specify no rendering as an empty string '', along the lines of:

{(stat == "SHOW_BUTTON") ? <button onClick={ this.myAction. bind(this,i,item) }>buttonLabel</button> : '' } 
like image 23
Gunnar Forsgren - Mobimation Avatar answered Nov 16 '22 11:11

Gunnar Forsgren - Mobimation