How to render an empty element list?

[kendallb]

I have a simple component that does nothing except capture DOM events so it knows if it is currently rendered in the DOM or not (primarily used so we can swallow barcodes from the barcode scanner is a dialog box or something has popped up). Anyway the component is very simple and the render function is this:

    render() {
        return (<React.Fragment/>);
    }

I can't yet figure out how I can have the render function not actually render anything? I could render an empty div or something, but sometimes an extra div can mess up the output so I left it out for the JS version of this code.

[ProductiveRage]

You should be able to return null if you don't want to render anything. In the early React days, returning null was not supported and you had to return an empty element (such as a div) but that changed a while ago (15.0, I think). See https://reactjs.org/docs/conditional-rendering.html#preventing-component-from-rendering.

Note that React 16 brought in another way to do this when it added support for returning an array of elements from the Render method (see https://pawelgrzybek.com/return-multiple-elements-from-a-component-with-react-16/. This isn't supported in Bridge.React yet - it shouldn't be too difficult to add (I prototyped it late 2017 / early 2018, I think) but the bindings would have not been compatible with earlier versions of the React library if they started supporting returning arrays of components. I think that that potential issue can probably be ignored now (hopefully nobody would be using the latest version of Bridge.React but still using a pre-16.0 version of React itself) but there hasn't been any demand for this functionality and so I haven't spent any more time on it.

[kendallb]

Well I was not sure if I can return null because I actually do want to get the lifecycle events? If I return null then I don’t think the ComponentDidMount event is called? Returning the fragment solved it. Is that the same as returning a list of elements in React 16?

[ProductiveRage]

I thought that you would get the life cycle methods if you return null from Render since some of them are called before Render. But it would be worth testing to make sure!

[kendallb]

I will test it using the existing JSX version and let you know.

I have other components that return a fragment also. How do I implement those in C# at the moment since there is no wrapper for the fragment class? Or am I missing where that class is defined?

[ProductiveRage]

The fragment class / syntax doesn't exist in the bindings.

When support is added for React 16's ability to return an array of elements from Render methods then there will be no need for a fragment class to exist, hopefully it will be possible to return an array directly without wrapping it up in an interim fragment type (like the code in Render An Array Of Elements With React 16).

[kendallb]

Ok, so without that binding, what's the solution at the moment other than wrapping things in a div? Using a div always works, but sometimes depending on how the original styles were written, an extra div can break the styles :(

[ProductiveRage]

No solution. Wrap in a div and style accordingly. Or write tsx components.